当前界面是没有回到顶部按钮（按钮已隐藏），当向下滑动滚动条时显示按钮，点击按钮回到顶部。
css部分:
*{margin: 0;padding: 0}
body{
height: 2000px;
background: lightskyblue;
}
.to-top{
position: fixed;
bottom: 100px;
right: 30px;
width:100px;
height: 100px;
border-radius: 50%;
background: red;
text-align: center;
line-height: 100px;
color: #fff;
cursor: pointer;
display: none;
}
.show{
display: block;
}
代码部分:
只需要一个div
<body>
<div class="to-top">回到顶部</div>
</body>
js部分：
<script>
var topBtn=document.getElementsByClassName("to-top")[0];
//滚动时执行
window.onscroll=function (data) {
//获取滚动条高度
var windScrollTop= document.documentElement.scrollTop;
if(windScrollTop>=400){
topBtn.classList.add("show")
}else {
topBtn.classList.remove("show")
}
};
topBtn.onclick=function () {
window.scrollTo(0,0)//回到顶部0px
}
</script>
680
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
