原生js、实现缓慢回到顶部效果

原生js、实现缓慢回到顶部效果

1.Demo展示：

2 . Html布局：

	<!--返回顶部-->
	<div class="gotop">
		<img src="images/top/toTop.jpg">
	</div>

3. css样式表：

/*回到顶部*/
	.gotop{
		width:70px;
		height:70px;
		position:fixed;
		top:70%;
		right:50%;
		margin-right:-725px;
		display:none;
		cursor:pointer;
	}
	
	.gotop img{
		width:100%;
		height:100%;
	}

4. 原生js代码：

window.onload = function(){
		var divs = document.querySelector(".gotop");
		//获取可视区域的高度;
		var clientH = document.documentElement.clientHeight;
		var timer = null;
		var Ontop = document.documentElement.scrollTop || document.body.scrollTop;//兼容性设置;	

		window.onscroll = function() {
            //获得滚动条到顶部的距离
            Ontop = document.documentElement.scrollTop || document.body.scrollTop;//兼容性设置;
            if (Ontop > clientH * 2) {
                divs.style.display = "block";
            } else {
                divs.style.display = "none";
            }
            toTop(); //调用回到顶部函数；
        }
		
		//回到顶部函数;
		function toTop(){
			divs.onclick = function(){
			timer = setInterval(function(){ 	
				//让滚动条到顶部的距离自动缩减到0;
				document.documentElement.scrollTop = document.body.scrollTop = Math.floor(Ontop - 200);//兼容性设置;
				//设置定时器
					if(Ontop === 0 || document.documentElement.scrollTop === 0){
						clearInterval(timer);
					}
				},10);
			}
		}
	}

注：
其实，就是对常见的window对象和document对象的一些使用；

• 可视区域的宽、高:
  document.documentElement.clientHeight；
  document.documentElement.clientWidth;

• 滚动条的相关信息：
  document.documentElement.scrollTop；
  document.body.scrollTop（IE兼容）；

• 计时器的使用和清除：
  setInterval();
  clearInterval();

• Math对象（向下舍入）
  Math.floor();

• window.onscroll：滚动条事件（滚动时触发）；

~如遇错误，欢迎指正；