1/?css or scss/
2html {
3 scroll-behavior: smooth;
4}
5
6/?typescript/
7//use ViewportScroller in angular
8//in constructor
9private _vps: ViewportScroller
10
11//function
12scrollFn(anchor: string): void{
13 this._vps.scrollToAnchor(anchor)
14}
15
16/?HTML/
17<button (click)="scrollFn('about')">Scroll to div</button>
18
19///About section
20<div id="about">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, quasi nostrum labore sequi neque sed nihil consequuntur? Ea, dolorum minima,
21 cumque explicabo dicta est sit harum dolores, assumenda ex non.</div>
1//there are a few options you can go with, the basic one being css only
2//css or scss
3html {
4 scroll-behavior: smooth;
5}
6
7//You could also user ViewportScroller - available in angular
8//.....
9private _vps: ViewportScroller
10
11scrollFn(anchor: string): void{
12 this._vps.scrollToAnchor(anchor)
13}
14
15//HTML
16<p on-click="scrollFn('about')">scroll to about sections</p>
17
18///About section
19<div id="about">Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio, quasi nostrum labore sequi neque sed nihil consequuntur? Ea, dolorum minima,
20 cumque explicabo dicta est sit harum dolores, assumenda ex non.</div>