|
1 | 1 | # Smooth Scroll |
2 | | -A simple script to animate scrolling to anchor links. Easing support contributed by [Willem Liu](https://github.com/willemliu) with code from [Gaëtan Renaudeau](https://gist.github.com/gre/1650294). |
| 2 | +A lightweight script to animate scrolling to anchor links, by [Chris Ferdinandi](http://gomakethings.com). [View the Demo](http://cferdinandi.github.io/smooth-scroll/) |
| 3 | + |
| 4 | +1. [Getting Started](#getting-started) |
| 5 | +2. [Browser Compatability](#browser-compatability) |
| 6 | +3. [Options & Settings](#options-and-settings) |
| 7 | +4. [Changelog](#changelog) |
| 8 | +5. [License](#license) |
| 9 | +6. [Older Docs](#older-docs) |
| 10 | + |
| 11 | + |
| 12 | + |
| 13 | +## Getting Started |
| 14 | + |
| 15 | +### 1. Include Smooth Scroll on your site. |
| 16 | + |
| 17 | + <script src="js/smooth-scroll.js"></script> |
| 18 | + |
| 19 | +### 2. Add the markup to your HTML. |
| 20 | + |
| 21 | + <a data-scroll href="#bazinga">Anchor Link</a> |
| 22 | + ... |
| 23 | + <span id="bazinga">Bazinga!</span> |
| 24 | + |
| 25 | +Turn anchor links into Smooth Scroll links by adding the `[data-scroll]` data attribute. Give the anchor location an ID just like you normally would. |
| 26 | + |
| 27 | +### 3. Initialize Smooth Scroll. |
| 28 | + |
| 29 | + <script> |
| 30 | + smoothScroll.init(); |
| 31 | + </script> |
| 32 | + |
| 33 | +In the footer of your page, after the content, initialize Smooth Scroll. And that's it, you're done. Nice work! |
| 34 | + |
| 35 | + |
| 36 | + |
| 37 | +## Options and Settings |
| 38 | + |
| 39 | +Smooth Scroll includes smart defaults and works right out of the box. But if you want to customize things, it also has a robust API that provides multiple ways for you to adjust the default options and settings. |
| 40 | + |
| 41 | +### Global Settings |
| 42 | + |
| 43 | +You can pass options and callbacks into Smooth Scroll through the `init()` function: |
| 44 | + |
| 45 | + smoothScroll.init({ |
| 46 | + speed: 500, // How fast to complete the scroll in milliseconds |
| 47 | + easing: 'easeInOutCubic', // Easing pattern to use |
| 48 | + updateURL: false, // Boolean. Whether or not to update the URL with the anchor hash on scroll |
| 49 | + callbackBefore: function () {}, // Function to run before scrolling |
| 50 | + callbackAfter: function () {} // Function to run after scrolling |
| 51 | + }); |
| 52 | + |
| 53 | +#### Easing Options |
| 54 | + |
| 55 | +**Linear** |
| 56 | +*Moves at the same speed from start to finish.* |
| 57 | + |
| 58 | +* Linear |
| 59 | + |
| 60 | + |
| 61 | +**Ease-In** |
| 62 | +*Gradually increases in speed.* |
| 63 | + |
| 64 | +* easeInQuad |
| 65 | +* easeInCubic |
| 66 | +* easeInQuart |
| 67 | +* easeInQuint |
| 68 | + |
| 69 | + |
| 70 | +**Ease-In-Out** |
| 71 | +*Gradually increases in speed, peaks, and then gradually slows down.* |
| 72 | + |
| 73 | +* easeInOutQuad |
| 74 | +* easeInOutCubic |
| 75 | +* easeInOutQuart |
| 76 | +* easeInOutQuint |
| 77 | + |
| 78 | + |
| 79 | +**Ease-Out** |
| 80 | +*Gradually decreases in speed.* |
| 81 | + |
| 82 | +* easeOutQuad |
| 83 | +* easeOutCubic |
| 84 | +* easeOutQuart |
| 85 | +* easeOutQuint |
| 86 | + |
| 87 | + |
| 88 | +Learn more about the different easing patterns and what they do at [easings.net](http://easings.net/). |
| 89 | + |
| 90 | +### Override settings with data attributes |
| 91 | + |
| 92 | +Smooth Scroll also lets you override global settings on a link-by-link basis using the `[data-options]` data attribute: |
| 93 | + |
| 94 | + <a data-scroll |
| 95 | + data-options="speed: 500; |
| 96 | + easing: easeInOutCubic; |
| 97 | + updateURL: false |
| 98 | + "> |
| 99 | + Anchor Link |
| 100 | + </a> |
| 101 | + |
| 102 | +### Use Smooth Scroll events in your own scripts |
| 103 | + |
| 104 | +You can also call Smooth Scroll's scroll animation events in your own scripts: |
| 105 | + |
| 106 | + smoothScroll.animateScroll( |
| 107 | + toggle, // Node that toggles the animation. ex. document.querySelector('#toggle') |
| 108 | + anchor, // ID of the anchor to scroll to. ex. '#bazinga' |
| 109 | + options, // Classes and callbacks. Same options as those passed into the init() function. |
| 110 | + event // Optional, if a DOM event was triggered. |
| 111 | + ); |
| 112 | + |
| 113 | +### Fixed Headers |
| 114 | + |
| 115 | +Add a `[data-scroll-header]` data attribute to fixed headers. Smooth Scroll will automatically offset scroll distances by the header height. If you have multiple fixed headers, add `[data-scroll-header]` to the last one in the markup. |
| 116 | + |
| 117 | +<nav data-scroll-header> |
| 118 | + ... |
| 119 | +</nav> |
| 120 | + |
| 121 | + |
| 122 | +## Browser Compatability |
| 123 | + |
| 124 | +Smooth Scroll works in all modern browsers, and IE 9 and above. |
| 125 | + |
| 126 | +Smooth Scroll is built with modern JavaScript APIs, and uses progressive enhancement. If the JavaScript file fails to load, or if your site is viewed on older and less capable browsers, anchor links will jump the way they normally would. If you need to smooth scrolling for older browsers, [download the jQuery version of Smooth Scroll on GitHub](https://github.com/cferdinandi/smooth-scroll/tree/archive-v1). |
| 127 | + |
3 | 128 |
|
4 | | -## How It Works |
5 | | -Getting started with Smooth Scroll is really easy. [View the online tutorial](http://cferdinandi.github.com/smooth-scroll/) or dig through the `index.html` file. |
6 | 129 |
|
7 | 130 | ## Changelog |
8 | 131 | * v4.0 (February 21, 2014) |
@@ -73,5 +196,22 @@ Getting started with Smooth Scroll is really easy. [View the online tutorial](ht |
73 | 196 | * v1.0 (January 24, 2013) |
74 | 197 | * Initial release. |
75 | 198 |
|
| 199 | + |
| 200 | + |
| 201 | +## Contributors |
| 202 | + |
| 203 | +* [Willem Liu](https://github.com/willemliu) |
| 204 | +* [Gaëtan Renaudeau](https://gist.github.com/gre/1650294) |
| 205 | +* [Robert Pate](https://github.com/robertpateii) |
| 206 | +* [Arndt von Lucadou](https://github.com/a-v-l) |
| 207 | + |
| 208 | + |
76 | 209 | ## License |
77 | | -Smooth Scroll is free to use under the [MIT License](http://gomakethings.com/mit/). |
| 210 | +Smooth Scroll is licensed under the [MIT License](http://gomakethings.com/mit/). |
| 211 | + |
| 212 | + |
| 213 | + |
| 214 | +## Older Docs |
| 215 | + |
| 216 | +* [Version 3](http://cferdinandi.github.io/smooth-scroll/archive/v3/) |
| 217 | +* [Version 1](https://github.com/cferdinandi/smooth-scroll/tree/archive-v1) |
0 commit comments