Skip to content

Commit b20fb6d

Browse files
author
Chris Ferdinandi
committed
Launched version 4
1 parent 3fccd6d commit b20fb6d

File tree

2 files changed

+145
-5
lines changed

2 files changed

+145
-5
lines changed

README.md

Lines changed: 144 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,131 @@
11
# 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+
3128

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.
6129

7130
## Changelog
8131
* v4.0 (February 21, 2014)
@@ -73,5 +196,22 @@ Getting started with Smooth Scroll is really easy. [View the online tutorial](ht
73196
* v1.0 (January 24, 2013)
74197
* Initial release.
75198

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+
76209
## 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)

smooth-scroll.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,7 @@ window.smoothScroll = (function (window, document, undefined) {
172172
percentage = ( timeLapsed / speed );
173173
percentage = ( percentage > 1 ) ? 1 : percentage;
174174
position = startLocation + ( distance * _easingPattern(easing, percentage) );
175-
window.scrollTo( 0, position );
175+
window.scrollTo( 0, Math.floor(position) );
176176
_stopAnimateScroll(position, endLocation, animationInterval);
177177
};
178178

0 commit comments

Comments
 (0)