1.首先设置一个返回顶部的标签
<div id="totop"> <a href="javascript:;" id="btn">顶部</a> </div>讯享网
如果设置href="#"的话,超链接会自动存在一个瞬间返回顶部的功能，这里为了有效果的返回顶部，我们设置引入一个空脚本
2.在body添加脚本
讯享网<script type="text/javascript"> window.onload = function () { // 1.找到页面中的按钮 var totop = document.getElementById("btn"); totop.style.display ="none"; var timer = null; // 2. 给按钮绑定点击事件 totop.onclick =function () { // 周期性定时 timer = setInterval(function () { // 3.获取滚动条距离浏览器顶端的距离 var backTop = document.documentElement.scrollTop || document.body.scrollTop; // 越滚越慢 speedTop =backTop/5; document.documentElement.scrollTop=backTop-speedTop; if(backTop==0){ clearInterval(timer); } },30) } // 设置临界值 var pageHeight =700; window.onscroll =function () { var backTop = document.documentElement.scrollTop || document.body.scrollTop; if(backTop>pageHeight){ totop.style.display="block"; }else{ totop.style.display="none"; } } } </script>
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/41527.html