逻辑:
0、window.onscorll 事件
1、当滚动条滚动距离>200时,显示回到顶部,否则不显示
2、点击回到顶部,滚动条距离为0
<style type="text/css"> body { height: 1500px; } div { position: fixed; right: 20px; bottom: 20px; display: none; width: 200px; height: 200px; line-height: 200px; background: #ccc; text-align: center; } </style> <script type="text/javascript"> var oDiv = document.getElementsByTagName("div")[0]; window.onscroll = function () { var scollTop = document.documentElement.scrollTop || document.body.scrollTop; console.log(scollTop); if (scollTop >= 200) { oDiv.style.display = "block"; } else { oDiv.style.display = "none"; } } oDiv.onclick = function () { document.documentElement.scrollTop = document.body.scrollTop = 0; // 注意: 这里不能写scrollTop=0,因为这样的话只是重新赋值,并不能设置滚动距离 } </script>