javascript 返回顶部效果

DOM操作

 

document.getElementById                     根据ID获取标签元素
document.documentElemet.scrollTop           滚动条的数值，可读写

 事件运用

 

 

indow.onload           页面加载完毕后触发
onclick                 点击后触发
window.onscroll         滚动条滚动时触发

 定时器

 

 

setInterval()           设置定时器，需传2个参数
clearInterval()         关闭定时器，需传1个参数

 

 

 

#btn {width:40px;  height:40px; postion:fixed; left:50%; margin-left:610px;  bottom:30px;  background:url(sss.png) no-repeat left top;}
#btn:hover {background:url(sss.png) no-repeat left -40px; }

 

<a href="javascript:;" id="btn" title=“”></a>

 

外部加载JS

// 页面加载完毕后触发
window.onload = function() {
        var  obtn = document.getElementById('btn');
        var timer = null;
        var isTop = true;

        //滚动条滚动时触发
        window.onscroll = function(){
            if (!isTop){
               clearInterval(timer); 
         }
         isTop = false;
    }
        
       obtn.onclick = functiong(){
       //设置定时器
          timer = setInterval(function(){
                //获取滚动条距离顶部的高度
                var osTop = document.documentElement.scrollTop  || document .body.scrollTop;    :判断兼容
            
                var ispeed =Math.floor(-osTop / 6);
                document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed; 

                isTop = true;
                console.log(osTop - ispeed);
           if (osTop == 0){
               clearInterval(timer);
               }
        },30);       

    
  }
}