angular 10 scroll to element code example

Example 1: scroll to top angular

//inside the app.component.html add (activate):
<router-outlet  (activate)="onActivate($event)"></router-outlet>

//inside app.component.ts, add inside the class of the component:
export class AppComponent {
 
  onActivate(event) {
    window.scroll(0,0);
    //or document.body.scrollTop = 0;
    //or document.querySelector('body').scrollTo(0,0)
    
}
}

Example 2: on button click scroll to div angular

/?css or scss/
html {
  scroll-behavior: smooth;
}

/?typescript/
//use ViewportScroller in angular 
//in constructor
private _vps: ViewportScroller

//function
scrollFn(anchor: string): void{
  	this._vps.scrollToAnchor(anchor)
}

/?HTML/
<button (click)="scrollFn('about')">Scroll to div</button>

///About section
<div id="about">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, quasi nostrum labore sequi neque sed nihil consequuntur? Ea, dolorum minima, 
 cumque explicabo dicta est sit harum dolores, assumenda ex non.</div>

Example 3: scrollto angular

//there are a few options you can go with, the basic one being css only
//css or scss
html {
  scroll-behavior: smooth;
}

//You could also user ViewportScroller - available in angular 
//.....
private _vps: ViewportScroller

scrollFn(anchor: string): void{
  	this._vps.scrollToAnchor(anchor)
}

//HTML
<p on-click="scrollFn('about')">scroll to about sections</p>

///About section
<div id="about">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, quasi nostrum labore sequi neque sed nihil consequuntur? Ea, dolorum minima, 
 cumque explicabo dicta est sit harum dolores, assumenda ex non.</div>