Angular 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.
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 1.7.3
Installation
Include the .js file in your page then enable usage of the directive by including the "smoothScroll" module as a dependency
Bower
Install with bower with:
bower install ngSmoothScroll
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:
// 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:
// Basic Click me! // Custom containers Click me! // onClick for non-anchor tags Click me! // With options Scroll to next page.
Usage - As a service
Inject the 'smoothScroll' service in your directive / factory / controller / whatever, and call like this:
// Using defaultsvar element = document;; // With optionsvar element = $elem0; var options = duration: 700 easing: 'easeInQuad' offset: 120 { console; } { console; } ; // With options for custom containervar element = $elem0; var options = duration: 700 easing: 'easeInQuad' offset: 120 { console; } { console; } containerId: 'custom-container-id' ; // In directive's link function{ var options = $attrs; ;}
Options
duration
Type: Integer
Default: 0
The duration of the smooth scroll, in miliseconds.
offset
Type: Integer
Default: 800
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.
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'
Credits
Callback hooks contributed by Ben Armston. https://github.com/benarmston
Easing support contributed by Willem Liu. https://github.com/willemliu
Easing functions forked from Gaëtan Renaudeau. https://gist.github.com/gre/1650294
Infinite loop bugs in iOS and Chrome (when zoomed) by Alex Guzman. https://github.com/alexguzman
Support for scrolling in custom containers by Joseph Matthias Goh. https://github.com/zephinzer
Influenced by Chris Ferdinandi https://github.com/cferdinandi
Free to use under the MIT License.
Cheers.