页面回到顶部效果

//方法一： 用锚链接。

//方法二：  js方法。

// 回到顶部的按钮初始化时 css设置为   display: none. 隐藏按钮。

window.onload = function() {

   var  obtn = document.getElementById('btn');

  //获取到页面可视区域的高度。

  var clientHeight = document.documentElement.clientHeight;

   var timer = null;

   var  isTop = true;

 //  滚动条滚动时触发

  window.onscroll = function () {

      var osTop = document.documentElement.scrollTop || document.body.scrollTop;

       if( osTop >= clientHeight) {  // 如果滚动条到顶部的距离 大于 页面的的可视区域

              obtn.style.display = 'block'; 

         }else {

               obth.style.display = 'none';

         }

    if(!isTop) {

        clearInterval(timer);

    }

    isTop = false;

  }

  obtn.onclick = function () {

      // 设置定时器

    timer = setInterval(function(){

           // 获取滚动条距离顶部的高度

           var osTop = document.documentElement.scrollTop || document.body.scrollTop;

            var  ispeed = Math.floor(-osTop / 6);  // 速度   // Math.floor()向下取整

           document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed ;

            isTop = true;

           console.log(osTop - ispeed);

            if( osTop == 0) {  // 滚动条到顶部时，清除定时器

                clearInterval(timer);  

            }

 },30);

}

}