标签：<script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style type="text/css">
.ceshi{
height: 3000px;
}
.btn{
display: none;
position: fixed;
bottom:30px;
right: 30px;
width: 50px;
height: 50px;
transition: 1.5s all;
}
</style>
</head>
<body>
<div class="ceshi" >
</div>
<span id="btn" class="btn">
<img src="PX_11.jpg" style="width: 100%;height: 100%;border-radius: 50%;" >
</span>
<script type="text/javascript">
window.onscroll = function(){
let scrllo =getScrollTop();
//多少距离显示
if(scrllo>1600){
document.getElementById("btn").style.display="block";
//小于多少距离显示
}else if(scrllo<500){
document.getElementById("btn").style.display="none";
}
}
//添加点击返回事件
document.getElementById("btn").onclick=function(){
//运动的动画效果未加
//返回顶部
document.body.scrollTop=0;
}
//获取滚动条距离顶端的距离
function getScrollTop() {
var scrollPos;
if (window.pageYOffset) {
scrollPos = window.pageYOffset; }
else if (document.compatMode && document.compatMode != ‘BackCompat‘)
{ scrollPos = document.documentElement.scrollTop; }
else if (document.body) { scrollPos = document.body.scrollTop; }
return scrollPos;
}
</script>
</body>
</html>
本文出自 “12897581” 博客，请务必保留此出处http://12907581.blog.51cto.com/12897581/1971110
标签：<script>
原文地址：http://12907581.blog.51cto.com/12897581/1971110
