https://github.com/kavil/ng2smoothscroll
A pure-javascript library and set of directives to scroll smoothly to an element with easing.
https://github.com/kavil/ng2smoothscroll
angular2 ng2smoothscroll smoothscroll
Last synced: 7 months ago
JSON representation
A pure-javascript library and set of directives to scroll smoothly to an element with easing.
- Host: GitHub
- URL: https://github.com/kavil/ng2smoothscroll
- Owner: kavil
- Created: 2017-04-10T08:35:24.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2019-11-25T03:13:50.000Z (over 6 years ago)
- Last Synced: 2025-09-15T19:02:02.205Z (7 months ago)
- Topics: angular2, ng2smoothscroll, smoothscroll
- Language: TypeScript
- Size: 10.7 KB
- Stars: 12
- Watchers: 1
- Forks: 9
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Angular2 smooth scroll
==============
> base on[Angular smooth scroll](https://github.com/d-oliveros/ngSmoothScroll)
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.
# Features
* 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
# Installation
```js
// bower:
import { SmoothScrollToDirective, SmoothScrollDirective } from "ng2SmoothScroll";
// npm:
import { SmoothScrollToDirective, SmoothScrollDirective } from "ng2-smooth-scroll";
...
declarations[
...
SmoothScrollToDirective,
SmoothScrollDirective,
...
]
```
# Bower
Install with bower with:
```bash
bower install ng2SmoothScroll
```
# Npm
Install with npm with:
```bash
npm install ng2-smooth-scroll
```
# Usage - As a directive
This module provides two directives:
#### smoothScroll:
Attribute. Scrolls the window to this element, optionally validating the expression inside scroll-if.
Example:
```html
// Basic - The window will scroll to this element's position when compiling this directive
// With options
{{...}}
// Inside a custom container
{{...}}
// With condition
{{...}}
// Inside ng-repeat
{{...}}
```
####scrollTo:
Attribute. Scrolls the window to the specified element ID when clicking this element.
Example:
```html
// Basic
Click me!
// Custom containers
Click me!
// onClick for non-anchor tags
Click me!
// With options
Scroll to next page.
```
### Options
#### duration
Type: `Integer`
Default: `800`
The duration of the smooth scroll, in miliseconds.
#### offset
Type: `Integer`
Default: `0`
The offset from the top of the page in which the scroll should stop.
#### easing
type: `string`
default: `easeInOutQuart`
the easing function to be used for this scroll.
#### middleAlign
type: `boolean`
default: `false`
Middle align the scrolled element
#### scrollOnClick
type: `boolean`
default: `false`
(smoothScroll directive only) Scroll to element when it is clicked
#### callbackBefore
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.
#### callbackAfter
type: `function`
default: `function(element) {}`
a callback function to run after the scroll has completed. It is passed the
element that was scrolled to.
#### containerId
type: `string`
default: null
ID of the scrollable container which the element is a child of.
### Easing functions
The available easing functions are:
* 'easeInQuad'
* 'easeOutQuad'
* 'easeInOutQuad'
* 'easeInCubic'
* 'easeOutCubic'
* 'easeInOutCubic'
* 'easeInQuart'
* 'easeOutQuart'
* 'easeInOutQuart'
* 'easeInQuint'
* 'easeOutQuint'
* 'easeInOutQuint'
Cheers.