In this article, we discuss about Smooth Scroll In Angular

Smooth Scroll In Angular
Smooth Scroll In Angular

Smooth Scroll In Angular

For those who have been working with Html are well aware of anchor scrolling, its a nice feature to add in your page that help user to navigate to a specific point in your page with just a click.

So basically the main intention is that when a user clicks the anchor link they will be scrolled smoothly to the information further up/down on the page.

Step 1:

Add anchorScrolling : ‘enabled’ in your router module’s extra options.

@NgModule({
imports: [
BrowserModule,
FormsModule,
RouterModule.forRoot(routes, { userHash: true, anchorScrolling: 'enabled'})],
declarations: [],


})
export class AppModule { }

As per Anchor scroll definition says :

Configures if the router should scroll to the element when the url has a fragment.

'disabled' — does nothing (default).

'enabled' — scrolls to the element. This option will be the default in the future.

Anchor scrolling does not happen on ‘popstate’. Instead, we restore the position that we stored or scroll to the top.

Step 2:

app.component.html

<a href="#section1" (click)="onClick('section1')">Click Me to Navigate Section1</a>


<section id="section1"></section>

app.component.ts

you can import ViewportScroller from @angular/common

constructor(private viewportScroller:ViewportScroller) { }
  onClickScroll(elementId:string):void{
    this.viewportScroller.scrollToAnchor(elementId);
  }

Step 4 (optional)

Add this style in your css or scss file to add smooth scroll effect in your app.

html{
scroll-behaviour: smooth;
}

Hopefully Integrated in your Project

Also Check out How To Use Owl Carousel In Angular 8

Angular

smooth scroll angularjs,smooth scroll bar angular,smooth scroll in angular,smooth scroll in angular angularjs,smooth scroll in angular js,smooth scroll safari angular,smooth scroll to anchor angular,smooth scroll to div angular 7,smooth scroll to element angular,smooth scroll to id angular,smooth scroll to specific div on click in angular,smooth scroll to specific div on click in angular,

Related Posts