原生js实现返回顶部缓冲效果

返回顶部

  //在页面加载完后立即执行多个函数方案

  function addloadEvent(func){

    var oldonload=window.onload;

    if(typeof window.onload !="function"){

      window.onload=func;

    }

    else{

      window.onload=function(){

        if(oldonload){

          oldonload();

        }

        func();

      }

    }

  }

  //在页面加载完后立即执行多个函数方案结束

  addloadEvent(b);

  function b(){

    var gotop=document.getElementById("gotop");   

    var timer;

    var tf=true;

    //滚动触发

    window.onscroll=function(){

      //获取滚动条高度

      var ostop=document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

      //获取窗口可视区域高度

      //console.log(ostop)

      var ch=document.documentElement.clientHeight||document.body.clientHeight;

      //如果页面超过一屏高度按钮显示，否则隐藏

      if(ostop>=ch){

        gotop.style.display="block";

      }else{

        gotop.style.display="none";

      }

      //

      if(!tf){

        clearInterval(timer);      

      }

       tf=false;

    }

    //点击触发

    gotop.onclick=function(){

      //创建定时器

      timer=setInterval(function(){

        //获取滚动条高度

        var ostop=document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

        //每次上升高度的20%

        var speed=Math.ceil(ostop/5);

        //每次上升当前高度的80%

document.documentElement.scrollTop=document.body.scrollTop=ostop-speed;

        //如果高度为0，清除定时器

        if(ostop==0){

          clearInterval(timer);

        }

        tf=true;

      },30);     

    }

  }