Scroll ze links

linkscroll.js

var animations = {
    onload: function(callback) {
        document.readyState === 'interactive' || document.readyState === 'complete' ? callback : document.addEventListener('DOMContentLoaded', callback);
    },
    renderize: function(fps, render) {
        var fpsInterval, startTime, now, then, elapsed;

        fpsInterval = 1000 / fps;
        then = Date.now();
        startTime = then;

        (function animate() {
            var anim = requestAnimationFrame(animate);
            now = Date.now();
            elapsed = now - then;
            if (elapsed > fpsInterval) {
                then = now - (elapsed % fpsInterval);
                render();
            }
        })();
    },
    easeInOutCubic: function(t, b, c, d) {
        if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
        return c / 2 * ((t -= 2) * t * t + 2) + b;
    },
    bringIntoView: function(e, duration) {
        var self = this;
        if(typeof e === 'string'){
            if(document.getElementById(e)){
                e = document.getElementById(e);
            } else if(document.querySelector('.' + e)){
                e = document.querySelector('.' + e);
            } else {
                e = document.querySelector(e);
            }
        }
        var bodyel = /firefox|trident/i.test(navigator.userAgent) ? document.documentElement : document.body;
        var startTime;
        var startPos = bodyel.scrollTop;
        var endPos = e.getBoundingClientRect().top;
        var maxScroll = bodyel.scrollHeight - window.innerHeight;
        var scrollEndValue = startPos + endPos < maxScroll ? endPos : maxScroll - startPos;

        self.renderize(60, function() {
            startTime = startTime || Date.now();
            var elapsed = Date.now() - startTime;
            if (elapsed < duration) {
                bodyel.scrollTop = self.easeInOutCubic(elapsed, startPos, scrollEndValue, duration);
            }
        });
    },
    scrollAnchorLinks: function(duration){
        var self = this;
        self.onload(function(){
            var links = document.querySelectorAll('a');
            var i = links.length;
            while(i--) {
                var href = links.item(i).href;
                if(href.indexOf('/#') > 1){
                    var target = href.substr(href.indexOf('/#') + 2);
                    if(document.getElementById(target)){
                        links.item(i).addEventListener(clicked,function(e){
                            self.bringIntoView(target, duration);
                            setTimeout(function(){
                                window.location.hash = target;
                            },duration + 10);
                            e.preventDefault();
                            return false;
                        });
                    }
                }
            }
        });
    },
    scrollAnchorOnLoad: function(duration){
        var hash = window.location.hash.substr(1);
        window.location.hash = '';
        this.onload(function(){
            if(hash) {
                animations.bringIntoView(hash, duration);
                setTimeout(function(){
                    window.location.hash = hash;
                }, duration + 10)
            }
        });
    }
};

// Scroll the links
animations.scrollAnchorOnLoad(300);
animations.scrollAnchorLinks(300);

Target of this is to scroll the page to the id on page load and on click (while being able to be extended for other animations, is part of https://github.com/lopeax/helper)