Scroll to element on click in Angular 4

Question

I want to be able to scroll to a target when a button is pressed  I was thinking something like this   lt button  click   quot scroll  target  quot  gt Button lt  button gt   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

User · Answer

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>

User · Answer

You could do it like this    lt button  click   scroll target   gt  lt  button gt   lt div  target gt Your target lt  div gt    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

User · Answer

You can do this by using jquery    ts code        scrollTOElement    element  offsetParam   speedParam     gt        const toElement     element       const focusElement     element       const offset   offsetParam   1    200      const speed   speedParam   1    500         html  body   animate         scrollTop  toElement offset   top   offset        speed       if  focusElement            focusElement  focus                html code     lt button  click   scrollTOElement   elementTo  500 3000   gt Scroll lt  button gt    Apply this on elements you want to scroll     lt div id  elementTo  gt some content lt  div gt    Here is a stackblitz sample

User · Answer

I need to do this trick  maybe because I use a custom HTML element  If I do not do this  target in onItemAmounterClick won t have the scrollIntoView method  html  lt div  ngFor quot     quot  gt         lt my-component  target  click   quot clicked target  quot  gt  lt  my-component gt   lt  div gt    ts onItemAmounterClick target     target   ngContext   0  scrollIntoView  behavior   smooth

User · Answer

Here is how I did it using Angular 4  Template  lt div class  quot col-xs-12 col-md-3 quot  gt     lt h2 gt Categories lt  h2 gt     lt div class  quot cat-list-body quot  gt       lt div class  quot cat-item quot   ngFor  quot let cat of web menu   async quot  gt         lt label  click   quot scroll  cat-  cat category id  quot  gt   cat category name   lt  label gt       lt  div gt     lt  div gt   lt  div gt   add this function to the Component  scroll id      console log  scrolling to   id       let el   document getElementById id     el scrollIntoView

User · Answer

In Angular you can use ViewChild and ElementRef  give your HTML element a ref  lt div  myDiv  gt    and inside your component  import   ViewChild  ElementRef   from   angular core    ViewChild  myDiv   myDivRef  ElementRef   you can use this myDivRef nativeElement to get to your element

User · Answer

I have done something like what you re asking just by using jQuery to find the element  such as document getElementById       and using the  focus   call

User · Answer

Another way to do it in Angular  Markup   lt textarea  inputMessage gt  lt  textarea gt   Add ViewChild   property   ViewChild  inputMessage   inputMessageRef  ElementRef   Scroll anywhere you want inside of the component using scrollIntoView   function  this inputMessageRef nativeElement scrollIntoView

User · Answer

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

User · Answer

You can achieve that by using the reference to an angular DOM element as follows   Here is the example in stackblitz  the component template    lt div class  other-content  gt        Other content        lt button  click   element scrollIntoView   behavior   smooth   block   center      gt          Click to scroll        lt  button gt       lt  div gt       lt div id  content   element gt        Some text to scroll  lt  div gt

User · Answer

In Angular 7 works perfect HTML  lt button  click   quot scroll target  quot  gt Click to scroll lt  button gt   lt div  target gt Your target lt  div gt   In component scroll el  HTMLElement        el scrollIntoView  behavior   smooth

User · Answer

You can scroll to any element ref on your view by using the code block below  Note that the target  elementref id  could be on any valid html tag  On the view html file   lt div id  quot target quot  gt   lt  div gt   lt button  click   quot scroll   quot  gt Button lt  button gt         on the  ts file  scroll        document querySelector   target   scrollIntoView   behavior   smooth   block   center

[javascript] Scroll to element on click in Angular 4

Examples related to javascript

Examples related to html

Examples related to angular

Examples related to typescript