ng2-simple-smooth-scroll
Smooth scroll for Angular9+. Demo
Getting Started
You can install ng2-simple-smooth-scroll by using npm.
npm install ng2-simple-smooth-scroll --save
Once installed you need to import our main module:
This module provides one directive and one service.
;;; ; // <-- add @
Usage - Service
import service to component
;;; @ implements OnInit { } { thissmooth; } { thissmooth; }
Methods
smoothScrollToTop
smoothScrollToTop( [SimpleSmoothScrollOption] [, HTMLElement] )
Smooth scroll to top page.
smoothScrollToAnchor
smoothScrollToAnchor( [SimpleSmoothScrollOption] [, HTMLElement] )
Smooth scroll to the anchor.
ISimpleSmoothScrollOption
For set duration and easing function
let option1 = duration: 500 ;let option2 = duration: 1000 easing: 'easeOutQuart';let option3 = easing: 'linear'; // this.smooth.smoothScrollToTop(option1);// this.smooth.smoothScrollToAnchor(option2);
Usage - Directive
SimpleSmoothScroll
Scroll the window to the specified element ID or hash when clicking the element.
; @ ...
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