base onAngular smooth scroll
A pure-javascript library and set of directives to scroll smoothly to an element with easing. Easing support contributed by Willem Liu with code from Gaëtan Renaudeau.
No jQuery required.
- Exposes a service that scrolls the window to an element's location
- Provides two directives that enable smooth scrolling to elements.
- Clean: No classes are added, no jQuery is required, no CSS files or configuration is needed.
- Scrolling within a custom container added in 2.0.0
// bower:
import { SmoothScrollToDirective, SmoothScrollDirective } from "ng2SmoothScroll";
// npm:
import { SmoothScrollToDirective, SmoothScrollDirective } from "ng2-smooth-scroll";
...
declarations[
...
SmoothScrollToDirective,
SmoothScrollDirective,
...
]Install with bower with:
bower install ng2SmoothScrollInstall with npm with:
npm install ng2-smooth-scrollThis module provides two directives:
Attribute. Scrolls the window to this element, optionally validating the expression inside scroll-if.
Example:
// Basic - The window will scroll to this element's position when compiling this directive
<div smoothScroll></div>
// With options
<div smoothScroll
[duration]="800"
[easing]="easeInQuint"
[offset]="120"
[middleAlign]="true"
[callbackBefore]="aFunction(element)"
[callbackAfter]="anotherFunction">
{{...}}
</div>
// Inside a custom container
<div smoothScroll
[duration]="800"
[easing]="easeInQuint"
[offset]="120"
[callbackBefore]="aFunction(element)"
[callbackAfter]="anotherFunction"
[containerId]="container-id">
{{...}}
</div>
// With condition
<div smoothScroll
[scrollIf]="myExpression">
{{...}}
</div>
// Inside ng-repeat
<div smoothScroll
[scrollIf]="myExpression"
[duration]="2500">
{{...}}
</div>####scrollTo:
Attribute. Scrolls the window to the specified element ID when clicking this element.
Example:
// Basic
<a href="#"
[scrollTo]="'my-element-3'">
Click me!
</a>
// Custom containers
<a href="#"
[scrollTo]="'my-element-3'"
[containerId]="custom-container-id">
Click me!
</a>
// onClick for non-anchor tags
<div [scrollTo]="'my-element-3'"
[containerId]="custom-container-id">
Click me!
</div>
// With options
<button
[scrollTo]="'elem-id5'"
[duration]="1800"
[middleAlign]="true"
[callbackBefore]="aFunction(element)"
[callbackAfter]="anotherFunction">
Scroll to next page.
</button>
Type: Integer
Default: 800
The duration of the smooth scroll, in miliseconds.
Type: Integer
Default: 0
The offset from the top of the page in which the scroll should stop.
type: string
default: easeInOutQuart
the easing function to be used for this scroll.
type: boolean
default: false
Middle align the scrolled element
type: boolean
default: false
(smoothScroll directive only) Scroll to element when it is clicked
type: function
default: function(element) {}
a callback function to run before the scroll has started. It is passed the element that will be scrolled to.
type: function
default: function(element) {}
a callback function to run after the scroll has completed. It is passed the element that was scrolled to.
type: string
default: null
ID of the scrollable container which the element is a child of.
The available easing functions are:
- 'easeInQuad'
- 'easeOutQuad'
- 'easeInOutQuad'
- 'easeInCubic'
- 'easeOutCubic'
- 'easeInOutCubic'
- 'easeInQuart'
- 'easeOutQuart'
- 'easeInOutQuart'
- 'easeInQuint'
- 'easeOutQuint'
- 'easeInOutQuint'
Cheers.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent