@boatzako/ngx-smooth-scroll NPM

ngx-smooth-scroll

Smooth scroll for Angular13+. Demo

Getting Started

You can install @boatzako/ngx-smooth-scroll by using npm.

npm install @boatzako/ngx-smooth-scroll --save

Once installed you need to import our main module:

This module provides one directive and one service.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { NgxSmoothScrollModule } from '@boatzako/ngx-smooth-scroll'; // <-- add

@NgModule({
  imports: [
    BrowserModule, 
    NgxSmoothScrollModule  // <-- add
  ],
  declarations: [ 
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

Usage - Service

import service to component

import { Component, OnInit } from '@angular/core';
import { SmoothScrollService, ISmoothScrollOption } from '@boatzako/ngx-smooth-scroll';

@Component({
  ...
})
export class AppComponent implements OnInit{

  constructor(private smooth: SmoothScrollService) { }

  ngOnInit() {
    this.smooth.smoothScrollToAnchor();
  }
  
  goTop(){
    this.smooth.smoothScrollToTop({ duration: 1000, easing: 'linear' });
  }
}

Methods

smoothScroll

smoothScroll( height , ISmoothScrollOption )\ Smooth scroll according to the height.

smoothScrollToTop

smoothScrollToTop( ISmoothScrollOption )\ Smooth scroll to top page.

smoothScrollToAnchor

smoothScrollToAnchor( ISmoothScrollOption )\ Smooth scroll to the anchor.

ISmoothScrollOption

For set duration, easing function, and offset

let option1 = { duration: 500 };
let option2 = { duration: 1000, easing: 'easeOutQuart'};
let option3 = { easing: 'linear'};
let option4 = { duration: 700, easing: 'easeInCubic', offset: -50 };

// this.smooth.smoothScrollToTop(option1);
// this.smooth.smoothScrollToAnchor(option2);

Usage - Directive

SmoothScroll\ Scroll the window to the specified element ID or hash when clicking the element.

import { Component, OnInit } from '@angular/core';

@Component({  
  ...
  template: `
    <div id="div1">
      <a href="#div2" SmoothScroll [showHash]="true">Click!!</a>
    </div>
    <div id="div2" SmoothScroll [scrollTo]="'div1'" [duration]="500">
      <h1>Click me</h1>
    </div>
  `,
  ...
})
export class AppComponent{
	...
}