Skip to content

Instantly share code, notes, and snippets.

@BCasal

BCasal/Smooth scroll.markdown

Last active October 16, 2015 15:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save BCasal/b1a7a7d5cb3f30cc8a58 to your computer and use it in GitHub Desktop.
Save BCasal/b1a7a7d5cb3f30cc8a58 to your computer and use it in GitHub Desktop.
Download ZIP
Smooth scroll
Raw
index.html
<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>
Raw
script.js
(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);
});
}
})();
Raw
Smooth scroll.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment