在许多的PC端中，我们滑动滚动条，滑倒一定程度的时候，我们会出现一个向上的小三角，点击之后我们就可以直接返回到顶部，这是如何实现的呢？
在做这个效果之前，我们要准备2个事件scroll与click
复制代码，动手尝试一下吧！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>回到顶部</title> <style> * { margin: 0; padding: 0; } /* 我们给body上高度，要不然没有滚动条 */ body { height: 2000px; } .box { height: 100px; text-align: center; line-height: 100px; font-size: 40px; background-color: red; } .top { width: 45px; height: 50px; background-color: pink; opacity: 0; /* 小手样式 */ cursor: pointer; /* 我们给它设置固定定位 */ position: fixed; right: 0; bottom: 100px; } </style> </head> <body> <!-- 最顶部 --> <div class="box">我是最顶部,好观察</div> <!-- 回到顶部的按钮 --> <div class="top">回到顶部</div> </body> <script> // 我们获取回到顶部按钮 let topBack = document.querySelector(".top") // 我们给window设置滚动事件 window.onscroll = function () { // 获取被卷去的部分 // document.documentElement是获取html let n = document.documentElement.scrollTop // 判断,使用三元运算符,如果大于300显示,小于300隐藏 topBack.style.opacity = n >= 300 ? 1 : 0 } // 给回到顶部绑定点击事件 topBack.onclick = function(){ document.documentElement.scrollTop = 0 } </script> </html>
感谢大家的阅读，如有不对的地方，可以向我指出，感谢大家！
