smoothScroll

A pure-javascript library and set of directives to scroll smoothly to an element with easing.
Homepage:
6 people use it
Author: 166f78b9aca517aaf31dde4c7761b9e4?d=https%3a%2f%2fidenticons.github.com%2fb983f83851bcd5f3c2b214e21f990f7e d-oliveros

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.

Installation

Include the .js file in your page then enable usage of the directive by including the "smoothScroll" module as a dependency

Usage - As a directive

This module provides two directives:

smoothScroll:

Attribute. Scrolls the window to this element, optionally validating the expression inside scroll-if.

// Basic - The window will scroll to this element's position when compiling this directive

// With options {{...}}

// With condition {{...}}

// Inside ng-repeat {{...}}

scrollTo:

Attribute. Scrolls the window to the specified element ID when clicking this element.

Example:

// Basic Click me!

// With options Scroll to next page.

Usage - As a library

Inject the 'smoothScroll' service in your directive / factory / controller / whatever, and call like this:

// Using defaults var element = document.getElementById('my-elem'); smoothScroll(element);

// With options var element = $elem[0];

var options = { duration: 700, easing: 'easeInQuad', offset: 120 }

smoothScroll(element, options);

// In directive's link function link: function($scope, $elem, $attrs){ var options = $attrs;

}

Options

duration

Type: Integer Default: 0

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.

Easing functions

The available easing functions are: * 'easeInQuad' * 'easeOutQuad' * 'easeInOutQuad' * 'easeInCubic' * 'easeOutCubic' * 'easeInOutCubic' * 'easeInQuart' * 'easeOutQuart' * 'easeInOutQuart' * 'easeInQuint' * 'easeOutQuint' * 'easeInOutQuint'

Credits

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

Influenced by Chris Ferdinandi https://github.com/cferdinandi

Free to use under the MIT License.

Cheers.

comments powered by Disqus
This page was last updated almost 3 years ago.