Skip to content

Instantly share code, notes, and snippets.

@BCasal

BCasal/Smooth scroll.markdown

Last active October 16, 2015 15:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save BCasal/b1a7a7d5cb3f30cc8a58 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save BCasal/b1a7a7d5cb3f30cc8a58 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. BCasal revised this gist Oct 16, 2015. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +0,0 @@
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  2. BCasal created this gist Oct 12, 2015.
    9 changes: 9 additions & 0 deletions Smooth scroll.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    Smooth scroll
    -------------
    A simple vanilla JS script to animate scrolling to anchor links.

    Forked from [Robin Leve](http://codepen.io/rleve/)'s Pen [Smooth scroll](http://codepen.io/rleve/pen/iCbgy/).

    A [Pen](http://codepen.io/BCasal/pen/EVvoXM) by [BCasal.es](http://codepen.io/BCasal) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/BCasal/pen/EVvoXM/license).
    41 changes: 41 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,41 @@
    <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>
    79 changes: 79 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,79 @@
    (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);

    });

    }

    })();
    1 change: 1 addition & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>