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

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

原生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();
}();