angular scroll to top – Angular Scroll to Top of Div Element Example

angular scroll to top – Scroll to the top of the page using angularjs with CSS Solution with Smooth Scrolling. first of all Add a New Component and then Set up the scroll-to-top button with some nice css styling.

angular scroll to top

4 Ways to Listen to Page Scrolling for Dynamic UI in Angular Scroll to top on Angular Router navigation.

src/app/app.component.ts

import { Component, VERSION } from '@angular/core';
  
@Component({
  selector: 'palainfo-v1',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular ' + VERSION.major;
  
  products : number[]=[];
  
  constructor(){
    for(var i=0; i<100; i++){
      this.products.push(+i)
    }
  }
  
  scrollToTop(el) {
    el.scrollTop = 0;
  }
}

src/app/app.component.html

<h2>Angular Scroll to Top of Div Example - www.pakainfo.com</h2>

<div #container class="container">
	<ul>
		<li *ngFor="let i of products">{{i}}</li>
	</ul>
</div>

<button (click)="container.scrollTop = 0">Scroll to Top</button>

src/app/app.component.css

.container{
  margin-bottom: 10px;
  width: 399px;
  background-color: #3d3d3d;
  height: 399px;
  overflow-y: scroll;
}

Don’t Miss : scroll-to-top implementation

Read Also:  CheckBox Show Hide Div using Angular Example

angular scroll to top

scrollToTop(){
	window.scroll(0,0);
}

I hope you get an idea about angular scroll to top.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.