• 原生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();
    }();
  • 相关阅读:
    实例讲解虚拟机3种网络模式(桥接、nat、Host-only)
    期刊搜索问题——SCI、EI、IEEE和中文期刊
    面向对象分析与设计(C++)课堂笔记
    windows与VMware ubuntu虚拟机实现文件共享
    GDI+在绘制验证码中的使用
    【转】.net中快捷键的使用
    MD5加密“破解”在.NET平台实现最基本的理解
    UE4 Persona 骨架网格物体动画
    从零开始做3D地图编辑器 基于QT与OGRE
    TBB(Intel Threading Building Blocks)学习笔记
  • 原文地址:https://www.cnblogs.com/naokr/p/8422476.html
Copyright © 2020-2023  润新知