A simple vanilla JS script to animate scrolling to anchor links.
Forked from Robin Leve's Pen Smooth scroll.
Last active
October 16, 2015 15:14
-
-
Save BCasal/b1a7a7d5cb3f30cc8a58 to your computer and use it in GitHub Desktop.
Smooth scroll
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Smooth Scroll - A simple vanilla JS script to animate scrolling to anchor links.</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <!-- HTML5 Shim for IE --> | |
| <!--[if IE]> | |
| <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> | |
| <![endif]--> | |
| </head> | |
| <body id="top"> | |
| <section style="width: 88%; max-width: 40em; margin-left: auto; margin-right: auto;"> | |
| <h1 style="text-align: center; font-size: 3em;">Smooth Scroll</h1> | |
| <p style="text-align: center; font-size: 1.5em;">A simple vanilla JS script to animate scrolling to anchor links.</p> | |
| <p><a class="scroll" data-speed="2000" href="#bazinga">Bazinga</a> <a class="scroll" href="#booya">Booya</a></p> | |
| <p> | |
| .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> | |
| .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> | |
| .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. | |
| </p> | |
| <p id="bazinga">Bazinga!</p> | |
| <p> | |
| .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> | |
| .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br> | |
| .<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. | |
| </p> | |
| <p id="booya">Booya!</p> | |
| <p><a class="scroll" data-speed="2000" href="#top">Back to the top</a></p> | |
| </section> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function() { | |
| 'use strict'; | |
| // Feature Test | |
| if ( 'querySelector' in document && 'addEventListener' in window && Array.prototype.forEach ) { | |
| // Function to animate the scroll | |
| var smoothScroll = function (anchor, duration) { | |
| // Calculate how far and how fast to scroll | |
| var startLocation = window.pageYOffset; | |
| var endLocation = anchor.offsetTop; | |
| var distance = endLocation - startLocation; | |
| var increments = distance/(duration/16); | |
| var stopAnimation; | |
| // Scroll the page by an increment, and check if it's time to stop | |
| var animateScroll = function () { | |
| window.scrollBy(0, increments); | |
| stopAnimation(); | |
| }; | |
| // If scrolling down | |
| if ( increments >= 0 ) { | |
| // Stop animation when you reach the anchor OR the bottom of the page | |
| stopAnimation = function () { | |
| var travelled = window.pageYOffset; | |
| if ( (travelled >= (endLocation - increments)) || ((window.innerHeight + travelled) >= document.body.offsetHeight) ) { | |
| clearInterval(runAnimation); | |
| } | |
| }; | |
| } | |
| // If scrolling up | |
| else { | |
| // Stop animation when you reach the anchor OR the top of the page | |
| stopAnimation = function () { | |
| var travelled = window.pageYOffset; | |
| if ( travelled <= (endLocation || 0) ) { | |
| clearInterval(runAnimation); | |
| } | |
| }; | |
| } | |
| // Loop the animation function | |
| var runAnimation = setInterval(animateScroll, 16); | |
| }; | |
| // Define smooth scroll links | |
| var scrollToggle = document.querySelectorAll('.scroll'); | |
| // For each smooth scroll link | |
| [].forEach.call(scrollToggle, function (toggle) { | |
| // When the smooth scroll link is clicked | |
| toggle.addEventListener('click', function(e) { | |
| // Prevent the default link behavior | |
| e.preventDefault(); | |
| // Get anchor link and calculate distance from the top | |
| var dataID = toggle.getAttribute('href'); | |
| var dataTarget = document.querySelector(dataID); | |
| var dataSpeed = toggle.getAttribute('data-speed'); | |
| // If the anchor exists | |
| if (dataTarget) { | |
| // Scroll to the anchor | |
| smoothScroll(dataTarget, dataSpeed || 500); | |
| } | |
| }, false); | |
| }); | |
| } | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment