AngularJS directives to get a smooth scroll effect (like this: http://css-tricks.com/examples/SmoothPageScroll/). Pure vanilla JS and jQuery versions.
#How to use it?
Here is a demo Plunkr: http://plnkr.co/edit/rD0Zgi6rg3Spc2XeVrZf?p=preview
- Build Coffeescript
grunt coffee:dist
- Copy generated JS in .tmp folder and include it
Copy the last version from the dist/scripts
folder
Via Twitter Bower (https://github.com/bower/bower)
Run bower install angular-smoothscroll
in your project
###Add the dependency to your app
Declare an AngularJS module with a dependency: app.module('myApp', ['angularSmoothscroll'])
##Vanilla JS (to improve, too fast)
Just declare an HTML link element which will start scroll, add the smooth-scroll
directive and pass the target ID: <a smooth-scroll target="target">Scroll to Target</a>
##jQuery version
Declare an HTML link element which will start scroll, add the smooth-scroll-jquery
directive and pass the target ID: <a smooth-scroll-jquery target="target">Scroll to Target</a>
. No target means scroll to top.
You can declare the speed (default is 500): <a smooth-scroll-jquery target="target" speed="1000">Scroll to Target</a>
With both versions, you can declare the offset (default is 100): <a smooth-scroll[-jquery] target="target" offset="30">Scroll to Target</a>
#How to contribute?
- Clone this repo
- Make your changes
- Test them:
grunt test
- Open a pull-request
#To improve
- Vanilla JS implementation which is not working very well
- Make the Angular JS unit tests pass (cf. http://stackoverflow.com/questions/16929046/effectively-unit-test-an-angularjs-directive-which-is-manipulating-the-dom?noredirect=1#comment24448390_16929046)
Powered by AngularJS (http://angularjs.org), Yeoman (http://yeoman.io), Grunt (http://gruntjs.com) and Karma (http://karma-runner.github.io/0.8/index.html)