使用js实现一个回到顶部的小demo
前置知识: css:
html,body { height:1000%; background-color: bisque; } .back { position: fixed; width: 70px; height: 25px; right: 50px; bottom: 80px; }body:
<button class="back" id="back">回到顶部</button> <script> let HTML = document.documentElement; let backToTop = document.getElementById('back'); //1.当浏览器滚动条滚动的时候,进行验证;卷去的高度超过两屏幕时,就让button显示 window.onscroll = (() => { let clientH = HTML.clientHeight; let scrollT = HTML.scrollTop; backToTop.style.display = scrollT >= clientH * 2 ? 'block' : 'none'; }) //2.点击回到顶部 backToTop.onclick = (() => { HTML.scrollTop = 0; }) </script>