点击回到顶部的按钮

在很多网站页面中如果我们把页面下拉很多的时候，右边一般都有一个按钮点击可以直接回到顶部，并且无论滚动条下拉多少这个小方块都保持在右边画面中心

简单分析下我们知道，这个小方块是绝对定位，当我们拉动滚动条的时候获取滚动的距离，然后让方块的top值等于滚动的距离。触发方块的点击事件时让top值为0

一 html && css 代码如下：

<style>
		#box{width:100px;height: 100px;background: red;position: absolute;right:0;}
	</style>
</head>
<body style="height:3000px;">
	<div>我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部我是顶部</div>
	<div id="box"></div>
</body>

二 js代码如下：

//回到顶部那个小方块必须在浏览器可视区的正中间

//获取可视区的高度的一半减去元素的高度的一半  (当前元素就会在浏览器的正中央)

var iH = document.documentElement.clientHeight/2-box.offsetHeight/2;
box.style.top = iH+'px';


window.onscroll = function(){
	//滚动的时候获取滚动条的滚动距离
	var t = document.documentElement.scrollTop || document.body.scrollTop;
	//小方块的top值就等于 iH+ 滚动条的滚动距离  滚动条拉动然后页面往下拉同时小方块的top值同步变化才能保持在可视区域的中央所以top值要加上滚动距离
	box.style.top = t+iH+'px';
}

box.onclick = function(){
	//让滚动条的滚动距离为0就可以回到顶部了
	document.documentElement.scrollTop = document.body.scrollTop = 0
}

/*var iH=document.documentElement.clientHeight/2-box.offsetHeight/2;
box.style.top=iH+"px";
window.onscroll=function(){
	var t=document.documentElement.scrollTop||document.body.scrollTop;
	box.style.top=iH+t+"px";
}
box.onclick=function(){
	document.documentElement.scrollTop=document.body.scrollTop=0

}

点击回到顶部的按钮

猜你喜欢