点击回到顶部的按钮

最新推荐文章于 2020-12-03 12:29:16 发布

bahuanpu8594

最新推荐文章于 2020-12-03 12:29:16 发布

阅读量191

点赞数

原文链接：http://www.cnblogs.com/MikePan/p/9123233.html

版权

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

简单分析下我们知道，这个小方块是绝对定位，当我们拉动滚动条的时候获取滚动的距离，然后让方块的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.οnscrοll=function(){
	var t=document.documentElement.scrollTop||document.body.scrollTop;
	box.style.top=iH+t+"px";
}
box.οnclick=function(){
	document.documentElement.scrollTop=document.body.scrollTop=0

}

转载于:https://www.cnblogs.com/MikePan/p/9123233.html

bahuanpu8594

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击回到顶部的按钮

在很多网站页面中如果我们把页面下拉很多的时候，右边一般都有一个按钮点击可以直接回到顶部，并且无论滚动条下拉多少这个小方块都保持在右边画面中心简单分析下我们知道，这个小方块是绝对定位，当我们拉动滚动条的时候获取滚动的距离，然后让方块的top值等于滚动的距离。触发方块的点击事件时让top值为0一 html && css 代码如下：<style>...
复制链接

扫一扫