JS实战回到顶部
Posted The Qing
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实战回到顶部相关的知识，希望对你有一定的参考价值。
1.实现点击按钮回到顶部
2.滚动事件距离顶部的位置 ， 如果大于一个临界值 ，按钮显示，小于则隐藏
实际应用淘宝，京东等平台滚动条点击回到顶部
思路：
1：定位为固定定位;
2：鼠标事件；
3：滚动事件；
4：定时器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,body{
width: 100%;
height: 300%;
}
button{
position: fixed;
right: 50px;
bottom: 400px;
width: 100px;
height: 100px;
background-color:red;
cursor: pointer;
display: none;
}
</style>
</head>
<body>
<button>回到顶部</button>
<script>
let btn = document.querySelector('button')
//滚动条每隔一段时间 向上移动一小段距离
btn.onclick = function(){
let timer = setInterval(function(){
scrollTo(0,scrollY-50)
if(scrollY<=0){
// 如果滚动顶部就清除
clearInterval(timer)
}
},20)
}
// 判断 滚动事件距离顶部的位置 ， 如果大于一个临界值 ，按钮显示，小于则隐藏
onscroll = function(){
//方法1 if判断
// if(scrollY>=600){
// btn.style.display = 'block'
// }else{
// btn.style.display = 'none'
// }
// }
//方法2 三目运算符判断
btn.style.display = (scrollY>=600)?'block' : 'none'
}
</script>
</body>
</html>
以上是关于JS实战回到顶部的主要内容，如果未能解决你的问题，请参考以下文章