ISCroller

Make any anchor with class ISCroller do a smooth scroll to its target element. Optional speed may be defined with a data-speed="number of miliseconds" as an attribute to the anchor tag.

by iscrow

HTML

<br/>*
<br/>*
<br/>
<a class="ISCroller" href="#somename_">Scroll with default speed to element with name="somename"</a>
<br/>
<a class="ISCroller" href="#someid">Scroll with default speed to element with id="someid"</a>

<br />*
<br/>*
<br/>*
<br/>*
<br/>
<a class="ISCroller" href="#someothername" data-speed="2000">Scroll with another speed to element with name="someothername"</a>
<br/>
<a class="ISCroller" href="#someotherid" data-speed="100">Scroll with another speed to element with id="someotherid"</a>

<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/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>
<div name="somename">Element with name="somename"</div>
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<div name="someothername">Element with name="someothername"</div>
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<div id="someid">Element with id="someid"</div>
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<div id="someotherid">Element with id="someothrid"</div>
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*
<br/>*

JavaScript

//ISCroller v2 Ivan Ivanov 2015-07-29
jQuery(document).ready(function ($) {
    href = window.location.hash;
    if (href.length > 0){
        target = findTarget(href);
        if (target.length == 1){
            iScrollTo($('body'),target);
        }
    }
    
    $("a.ISCroller").click(function (event) {
        event.preventDefault();
        href = $(this).attr('href');
        target = findTarget(href);
        if (target.length == 1){
            iScrollTo(this,target);
        }
    });
    
    function findTarget(href){
        href = href.replace(/_$/, '');
        target = $(href);
        if (target.length != 1) {
            href = href.replace(/^#/, '');
            target = $('[name=\''+href+'\']');
        }
        return target;
    }
    
    function iScrollTo(source,target){
        var speed = $(source).data('speed');
        if (isNaN(speed)) {
            speed = 500;
        }
        if (target.length == 1) {
            $('html, body').animate({
                scrollTop: $(target).offset().top
            }, speed);
        }
    }
});

//Examples:
//<a class="ISCroller" href="#someid">Scroll with default speed</a>
//<a class="ISCroller" href="#someotherid" data-speed="2000">Scroll with another speed</a>
//
//Infor About Links From Other Pages:
//To have a link from another page to an anchor on this page animated, append an underscore
//to the anchor on the other page!
//Example: <a href="#someid_">Scroll with default speed</a>
//To control the speed of animation on links from other pages, attach a data-sepeed attribute to
//the body element on the page with the target.
//Example: <body data-speed="2000">