网页中返回网页顶部功能
实现功能:在网页高度大于设定的值之后,出现返回顶部按钮,小于则自动隐藏,点击按钮返回网页顶部,同时按钮隐藏。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style type="text/css">
{
padding: 0;
margin: 0;
}
.con{
height: 2000px;
}
.goTop{
width: 50px;
height: 50px;
background-color: gray;
text-align: center;
line-height: 45px;
position: fixed;
right: 25px;
border-radius: 25px;
display: none;
}
</style>
</head>
<body>
<div class="con">
<h2>这里是顶部</h2>
<div class="goTop">返回</div>
</div>
<script type="text/javascript">
//当高度达到400时,出现按钮,小于时隐藏
//点击按钮时,滚动条为0
//根据谁进行滚动 body 或 html
let goTop = document.getElementsByClassName('goTop')[0];
window.onscroll = function(){
//获取高度 根据body 或 html
let res = document.body.scrollTop || document.documentElement.scrollTop
console.log(res);
if (res >= 400) {
goTop.style.display = 'block';
}else{
goTop.style.display = 'none';
}
}
goTop.onclick = function(){
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
效果展示:
完工!!!