Angular 9 Scroll To Element Id Code Example


Example 1: 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 2: 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>

Comments

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable