Skip to content
/ smooth-scroll Public
forked from cferdinandi/smooth-scroll

A simple vanilla JS script to animate scrolling to anchor links.

0 stars 856 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

mrvx/smooth-scroll

BranchesTags
 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

125 Commits
dist/js
dist/js
 
 
src/js
src/js
 
 
test
test
 
 
.gitignore
.gitignore
 
 
.travis.yml
.travis.yml
 
 
README.md
README.md
 
 
gulpfile.js
gulpfile.js
 
 
index.html
index.html
 
 
package.json
package.json
 
 

Repository files navigation

Smooth Scroll Build Status

A lightweight script to animate scrolling to anchor links.

Download Smooth Scroll 4 / View the demo

In This Documentation

  1. Getting Started
  2. Installing with Package Managers
  3. Options & Settings
  4. Browser Compatibility
  5. Contributors
  6. How to Contribute
  7. License
  8. Changelog
  9. Older Docs

Getting Started

Compiled and production-ready code can be found in the dist directory. The src directory contains development code. Unit tests are located in the test directory.

1. Include Smooth Scroll on your site.

<script src="dist/js/smooth-scroll.js"></script>

2. Add the markup to your HTML.

<a data-scroll href="#bazinga">Anchor Link</a>
...
<span id="bazinga">Bazinga!</span>

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.

3. Initialize Smooth Scroll.

<script>
	smoothScroll.init();
</script>

In the footer of your page, after the content, initialize Smooth Scroll. And that's it, you're done. Nice work!

Installing with Package Managers

You can install Smooth Scroll with your favorite package manager.

  • NPM: npm install cferdinandi/smooth-scroll
  • Bower: bower install https://github.com/cferdinandi/smooth-scroll.git
  • Component: component install cferdinandi/smooth-scroll

Options and Settings

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.

Global Settings

You can pass options and callbacks into Smooth Scroll through the init() function:

smoothScroll.init({
	speed: 500, // Integer. How fast to complete the scroll in milliseconds
	easing: 'easeInOutCubic', // Easing pattern to use
	updateURL: false, // Boolean. Whether or not to update the URL with the anchor hash on scroll
	offset: 0, // Integer. How far to offset the scrolling anchor location in pixels
	callbackBefore: function ( toggle, anchor ) {}, // Function to run before scrolling
	callbackAfter: function ( toggle, anchor ) {} // Function to run after scrolling
});

Easing Options

Linear Moves at the same speed from start to finish.

  • Linear

Ease-In Gradually increases in speed.

  • easeInQuad
  • easeInCubic
  • easeInQuart
  • easeInQuint

Ease-In-Out Gradually increases in speed, peaks, and then gradually slows down.

  • easeInOutQuad
  • easeInOutCubic
  • easeInOutQuart
  • easeInOutQuint

Ease-Out Gradually decreases in speed.

  • easeOutQuad
  • easeOutCubic
  • easeOutQuart
  • easeOutQuint

Learn more about the different easing patterns and what they do at easings.net.

Override settings with data attributes

Smooth Scroll also lets you override global settings on a link-by-link basis using the [data-options] data attribute:

<a data-scroll
   data-options="speed: 500;
                 easing: easeInOutCubic;
                 offset: 0;
                 updateURL: false"
>
	Anchor Link
</a>

Use Smooth Scroll events in your own scripts

You can also call Smooth Scroll's scroll animation events in your own scripts:

smoothScroll.animateScroll(
	toggle, // Node that toggles the animation. ex. document.querySelector('#toggle')
	anchor, // ID of the anchor to scroll to. ex. '#bazinga'
	options, // Classes and callbacks. Same options as those passed into the init() function.
	event // Optional, if a DOM event was triggered.
);

Example 1

smoothScroll.animateScroll( null, '#bazinga' );

Example 2

var toggle = document.querySelector('#toggle');
var options = { speed: 1000, easing: 'easeOutCubic' };
smoothScroll.animateScroll( toggle, '#bazinga', options );

Fixed Headers

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.

<nav data-scroll-header>
	...
</nav>

Browser Compatibility

Smooth Scroll works in all modern browsers, and IE 9 and above.

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.

Contributors

How to Contribute

In lieu of a formal style guide, take care to maintain the existing coding style. Don't forget to update the version number, the changelog (in the readme.md file), and when applicable, the documentation.

License

Smooth Scroll is licensed under the MIT License.

Changelog

Older Docs

About

A simple vanilla JS script to animate scrolling to anchor links.

Resources

Readme
Activity

Stars

0 stars

Watchers

2 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

No packages published