原生JS实现返回顶部和滚动锚点

;(function (window,doc,undefined) {
    function rollingAnchor(){
        this.timer ='';
    }
    rollingAnchor.prototype = {
        init: function () {
            return this;
        },
        //返回顶部
        returnTop: function (acceleration,time,callback) {
            var that = this,
                acceleration = acceleration || 0.1,
                time = time || 10,
                speed = 1 + acceleration;
            clearInterval(that.timer);
            that.timer = setInterval(function() {
                if (getScrollTop() <= 0){
                    clearInterval(that.timer);
                    if(callback) callback();
                    return;
                }
                //这行代码是关键，取得滚动条竖直距离，除以speed后再给滚动条设置竖直距离
                setScrollTop(Math.floor(getScrollTop() / speed));
            }, time);
            return this;
        },

        //返回锚点
        anchorPosition: function (idName,duration,dir) {
            if(typeof idName != 'object') { idName = document.getElementById(idName); }
            if(!idName) return;
            var z = this;
            z.el = idName;
            z.p = getPos(idName,dir);
            z.s = getScroll();
            z.clear = function(){window.clearInterval(z.timer);z.timer=null};
            z.clear();
            z.t=(new Date).getTime();
            z.step = function(){
                var t = (new Date).getTime();
                var p = (t - z.t) / duration;
                if (t >= duration + z.t) {
                    z.clear();
                    window.setTimeout(function(){z.scroll(z.p.y, z.p.x)},13);
                } else {
                    var st = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.y-z.s.t) + z.s.t;
                    var sl = ((-Math.cos(p*Math.PI)/2) + 0.5) * (z.p.x-z.s.l) + z.s.l;
                    z.scroll(st, sl);
                }
            };
            z.scroll = function (t, l){window.scrollTo(l, t)};
            z.timer = window.setInterval(function(){z.step();},13);
        }

    };

    function intval(v) {
        v = parseInt(v);
        return isNaN(v) ? 0 : v;
    }

    //获取元素信息
    function getPos(e,dir) {
        var l = 0;
        var t  = 0;
        var dir = dir || 0;
        var w = intval(e.style.width);
        var h = intval(e.style.height);
        var wb = e.offsetWidth;
        var hb = e.offsetHeight;
        while (e.offsetParent){
            l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);
            t += e.offsetTop  + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0);
            e = e.offsetParent;
        }
        l += e.offsetLeft + (e.currentStyle?intval(e.currentStyle.borderLeftWidth):0);
        t  += e.offsetTop  + (e.currentStyle?intval(e.currentStyle.borderTopWidth):0) - dir;
        return {x:l, y:t, w:w, h:h, wb:wb, hb:hb};
    }

    //获取滚动条信息
    function getScroll() {
        var t, l, w, h;
        if (document.documentElement && document.documentElement.scrollTop) {
            t = document.documentElement.scrollTop;
            l = document.documentElement.scrollLeft;
            w = document.documentElement.scrollWidth;
            h = document.documentElement.scrollHeight;
        } else if (document.body) {
            t = document.body.scrollTop;
            l = document.body.scrollLeft;
            w = document.body.scrollWidth;
            h = document.body.scrollHeight;
        }
        return { t: t, l: l, w: w, h: h };
    }

    //设置滚动条的竖直距离,实现效果的关键就是在很短的间隔时间内不断地修改滚动条的竖直距离,以实现滚动效果
    function setScrollTop(value) {
        doc.documentElement.scrollTop = value;
        doc.body.scrollTop = value;
    }

    //取得滚动条的竖直距离
    function getScrollTop() {
        return doc.documentElement.scrollTop || doc.body.scrollTop;
    }

    if(typeof define === 'function' && define.amd){
        define('rollingAnchor',[],function(){return rollingAnchor});
    }else{
        window.rollingAnchor = function (options) {
            return new rollingAnchor(options).init();
        };
    }

}(this,document));

//调用
var ToolBarContainer = function () {
    var anchor = rollingAnchor(),
        init = function () {
            query.add(doc.body, 'click', clickEvent);
        },
        clickEvent = function (event) {
            var target = query.getTarget(event);
            if(target.id == 'a-1'){
                anchor.returnTop(0.2,20);
                return;
            }
            if(target.id == 'a-2'){
                anchor.anchorPosition('a2',500);
                return;
            }
            if(target.id == 'a-3'){
                anchor.anchorPosition('a3',500);
                return;
            }
            if(target.id == 'a-4'){
                anchor.anchorPosition('a4',500);
                return;
            }
            if(target.id == 'a-5'){
                anchor.anchorPosition('a5',500);
                return;
            }
        };
    init();
}();