Noisy Pterodactyl Melodies

    @boatzako/ngx-smooth-scroll
    TypeScript icon, indicating that this package has built-in type declarations

    2.2.0 • Public • Published

    ngx-smooth-scroll

    Weekly downloads Total downloads License

    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] [, HTMLElement] )
    Smooth scroll according to the height.

    smoothScrollToTop

    smoothScrollToTop( [ISmoothScrollOption] [, HTMLElement] )
    Smooth scroll to top page.

    smoothScrollToAnchor

    smoothScrollToAnchor( [ISmoothScrollOption] [, HTMLElement] )
    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{
    	...
    }

    Options

    [scrollTo]

    type: string
    default: null
    ID of the element in document.

    [duration]

    type: number
    default: 800
    The duration of the smooth scroll, in milliseconds.

    [easing]

    type: enum
    default: easeInOutQuad
    The easing function to be used for this scroll.

    Easing functions from - https://gist.github.com/gre/1650294

    • 'linear'
    • 'easeInQuad'
    • 'easeOutQuad'
    • 'easeInOutQuad'
    • 'easeInCubic'
    • 'easeOutCubic'
    • 'easeInOutCubic'
    • 'easeInQuart'
    • 'easeOutQuart'
    • 'easeInOutQuart'
    • 'easeInQuint'
    • 'easeOutQuint'
    • 'easeInOutQuint'

    [offset]

    type: number
    default: 0
    scroll additional px ( like padding )

    [showHash]

    type: boolean
    default: false
    Set true for show hash on URL

    [container]

    type: HTMLElement
    default: document.documentElement
    Set element which need to scroll

    Authors

    License

    This project is licensed under the MIT License - see the LICENSE file for details

    Support

    Buy Me A Coffee

    Install

    npm i @boatzako/ngx-smooth-scroll

    DownloadsWeekly Downloads

    109

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    91 kB

    Total Files

    17

    Last publish

    Collaborators

    • boatzako