纯js 滚动到顶部函数分享

一个简单的js 滚动到页面顶部的函数,纯js,不依赖于Jqeury。也不是直接用a标签锚点,同时速度是可控的。如下:
先贴上代码:

function gototop(gotop, speed){
    var timer;
    var oldTop = document.documentElement.scrollTop || document.body.scrollTop;
    gotop.addEventListener('click',function(){
        var speed = speed || 10;
        timer = setInterval(function(){
            var top = document.documentElement.scrollTop || document.body.scrollTop;
            var gospeed = top/100;
            if(gospeed>speed){
                gospeed = speed;
            }else if(gospeed<3){
                gospeed = 3;
            }
            if(top>speed){
                if(document.documentElement.scrollTop){
                    top = document.documentElement.scrollTop-=speed;
                }else{
                    top = document.body.scrollTop-=speed;
                }
            }else{
                clearInterval(timer);
            }
        },5);
    });

    window.onscroll = function(e){
        var newTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(newTop>100){
            gotop.style.display = "block";
        }else{
            gotop.style.display = "none";
        }
        if(newTop>oldTop){
            clearInterval(timer);
        }
        oldTop = newTop;
    }
}
Created with Raphaël 2.1.0 点击滚动顶部的按钮 设置一个循环的函数不断对页面当前的高度进行减操作 当前高度是否足够再执行一次高度减的操作? 检测页面是否有向下滚动的操作 清除循环的函数,停止滚动的操作 End yes no yes no

你可能感兴趣的:(javascript)