Scroll to element on click in Angular 4

angular 4 scroll to element id
angular 7 scroll to element id
angular 6 scroll to element id
angularjs scroll to element
angular 6 scroll to element in div
angular 2 scroll to element in div
angular 2 detect scroll to bottom of div
angular scroll to bottom

I want to be able to scroll to a target when a button is pressed. I was thinking something like this.

<button (click)="scroll(#target)">Button</button>

And in my component.ts a method like.

scroll(element) {
    window.scrollTo(element.yPosition)
}

I know that the code above is not valid but just to show what I was thinking. I've just started to learn Angular 4 with no previous experience of Angular. I've been searching around for something like this but all the examples are in AngularJs which differs alot to Angular 4

You could do it like this:

<button (click)="scroll(target)"></button>
<div #target>Your target</div>

and then in your component:

scroll(el: HTMLElement) {
    el.scrollIntoView();
}

Edit: I see comments stating that this no longer works due to the element being undefined. I created a StackBlitz example in Angular 7 and it still works. Can someone please provide an example where it does not work?

Scroll to a certain element of the current page in Angular 4, Upon clicking a button (which is bottom of the page), I want to go to a certain element (in my case, #navbar) which is in the top of the current page,  Scroll to any element to enhance scroll-based features in you app. Works for Angular 4+, both AoT and SSR. No dependencies. TypeScript 87.2% JavaScript 5.3% Use Git or checkout with SVN using the web URL. Downloading

There is actually a pure javascript way to accomplish this without using setTimeout or requestAnimationFrame or jQuery.

In short, find the element in the scrollView that you want to scroll to, and use scrollIntoView.

el.scrollIntoView({behavior:"smooth"});

Here is a plunkr.

Angular should provide a way to scroll to a specific element on the , Fragment identifiers (hash) are usually used to link to specific places in a long page. This doesn't work with angular since the hash is being used to implement  angularjs scroll to div, angularjs scrolltop, angularjs scroll to bottom of div, scroll to element angularjs, angularjs scroll to div on click, angularjs anchorscroll animate example ItSolutionStuff.com

here is how I did it using angular 4.

Template

<div class="col-xs-12 col-md-3">
  <h2>Categories</h2>
  <div class="cat-list-body">
    <div class="cat-item" *ngFor="let cat of web.menu | async">
      <label (click)="scroll('cat-'+cat.category_id)">{{cat.category_name}}</label>
    </div>
  </div>
</div>

add this function to the Component.

scroll(id) {
  console.log(`scrolling to ${id}`);
  let el = document.getElementById(id);
  el.scrollIntoView();
}

angular-scroll-by-element, updating app.component.ts. ×. Format Document. Split Editor. More Actions Close all. Close saved. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19​. Fragment identifiers (hash) are usually used to link to specific places in a long page. This doesn't work with angular since the hash is being used to implement the route. A way to scroll down the page to a specific element should be provided.

In angular 7 works perfect

HTML

<button (click)="scroll(target)">Click to scroll</button>
<div #target>Your target</div>

In component

  scroll(el: HTMLElement) {
    el.scrollIntoView({behavior: 'smooth'});
  }

How to scroll to the bottom of a div? : Angular2, I have a component that acts as a messenger and I need it to scroll to the bottom 10 less known Angular features you've probably never used 4 days ago  It breaks the browser's back/forward button. If you're user clicks the browser back or forward button, they lose their place and gets scrolled way at the top. This can be a bit of a pain for your users if they had to scroll way down to get to a link and decided to click back only to find the scrollbar had been reset to the top.

Jon has the right answer and this works in my angular 5 and 6 projects.

If I wanted to click to smoothly scroll from navbar to footer:

<button (click)="scrollTo('.footer')">ScrolltoFooter</button>
<footer class="footer">some code</footer>

scrollTo(className: string):void {
   const elementList = document.querySelectorAll('.' + className);
   const element = elementList[0] as HTMLElement;
   element.scrollIntoView({ behavior: 'smooth' });
}

Because I wanted to scroll back to the header from the footer, I created a service that this function is located in and injected it into the navbar and footer components and passed in 'header' or 'footer' where needed. just remember to actually give the component declarations the class names used:

<app-footer class="footer"></app-footer>

Scrolling An Overflow-Container Back To The Top On Content , To implement this scroll-offset reset, we're going to reach into the View of our Angular Component, find the native HTML Element, and <p *ngFor="let i of [0,1​,2,3,4,5,6,7,8,9,10]">. This is tab one content </p>. </div> You might just have to bind to a click handler and then call something like, window. How to call scrollIntoView on an element in angular 2+ Ask Question Asked 2 years, 4 months ago. Active 8 months ago. Scroll to element on click in Angular 4. 0.

Directive Scroll - Angular 4, AngularVersionForThisPlunker = 'latest' </script> <title>angular Event listener for scroll event on the specific ui element // </summary> @HostListener("scroll",  A boolean value that indicates the type of the align: true - the top of the element will be aligned to the top of the visible area of the scrollable ancestor. false - the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. If omitted, it will scroll to the top of the element.

scrollIntoView(), Scroll the element with id="content" into the visible area of the browser window: var elmnt = document.getElementById("content"); elmnt.scrollIntoView();. How to Maintain Scroll Position in Angular Chat App. 1440 x 864 png 138 КБ. GitHub - angular-ui/ui-scroll: Unlimited bidirectional 806 x 250 animatedgif 565 КБ. stackoverflow.com. How to maintain vertical scroll when updating Angular 5 . Get or set the horizontal and vertical scroll position of an element or the document.

scrollIntoView is the best thing since sliced bread, Making elements scroll into view used to be hard, especially with animation. Now it's super easy with Tagged with html, javascript, webdev, angular. Steve Belovarich Apr 11 '19 Updated on Apr 11, 2020 ・4 min read. #html #javascript #​webdev #angular Event listeners for click are bound to the left and right buttons​. yOffset numberfunction()jqLite. If set, specifies a vertical scroll-offset. This is often useful when there are fixed positioned elements at the top of the page, such as navbars, headers etc. yOffset can be specified in various ways: number: A fixed number of pixels to be used as offset.

Comments
  • Your syntax does not have problems but you need to define what is #target.
  • So this should work? When I use a arbitrary number and call window.scrollTo(500) in my function nothing happens. I was thinking that element would be a HTMLElement
  • Right, however, what is #target, Angular will not resolve it? You can test scroll() with no parameter first.
  • Yeah I tried (click)="scroll()" in my button and window.scrollTo(0, 500) in the component but nothing happens
  • But when I do window.scrollTo(0, 500) in the constructor with a 500ms delay it works
  • For some reason running that exact code does nothing for me. Even a hardcoded window.scrollTo(0, 500) does nothing
  • Can you confirm that your scroll method in your component is executing? Add a console.log(el) and open your browser's Developer Tools to see if you are getting the correct element. Also, check the console for errors.
  • @N15M0_jk Yep, there's also an object you can pass in with other options, depending on what you need. developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
  • @Anthony It allows you to reference the element that you want to pass to the scroll function on the component. Notice that the click event calls scroll(target). If you wanted to get access to the element from inside the component without having to pass the element in, you could use @ViewChild.
  • It works fine with me now. But before i made a silly mistake and used id="target" instead of #target and it gave me "el is undefined error"!
  • 2 ways that this answer is different: 1. This is animated smooth scrolling, not a jump. 2. This answer does not scroll a window, but moves a scrollview within a window. For example, if you have a horizontal scrollview within the window. Check the plunkr for an example.
  • scrollIntoView's scrollIntoViewOptions (the object as argument) is only compatible with Firefox right now.
  • Works fine for Chrome and Firefox, but not for Safari.
  • You haven't set elementRefs or HTML ids in your template. Where exactly is the 'cat-'+cat.category_id element that you are scrolling to?