如何用js实现网页中的回到顶部功能

1、 首先打开sublime text 3，点击左上方，文件，新建一个html文件，并命名。如图所示：

4、 js代码中，首先定义一个变量timer ，赋值为null。再定凶及淄靥义变量pageHeight获取可视区域的高度。然后触发一个onscroll事件，在垌桠咛虞元素滚动时执行。函数中定义局部变量backtop，获取滚动条的垂直距离，若滚动条的垂直距离大于180px,则显示“回到顶部”链接,否则隐藏。代码如下： <script type="text/javascript"> $(function(){ var timer = null; var pageHeight= document.documentElement.clientHeight; //获取可视区域的高度 window.onscroll=function(){ //onscroll 事件在元素滚动时执行 var backtop=document.body.scrollTop; //获取滚动条滚动的垂直距离 if(backtop>=180) { $("#dtop").show(); //若滚动条滚动的垂直距离大于180px,则显示“回到顶部”链接,否则隐藏 } else { $("#dtop").hide(); } } </script>

6、 最后，在浏览器中查看结果。可以看到，刚开始是空白，因为图标默认隐藏。当鼠标向下移动到一定距离时，出现“回到顶部”图标，点击，便回到了顶部。如图：

7、 于是，简单的“回到顶部”功能就完成了。是不是很简单？完整js代艨位雅剖码如下：<script type="text/javascript"> $(function(){ var timer = null; var pageHeight= document.documentElement.clientHeight; //获取可视区域的高度 window.onscroll=function(){ //onscroll 事件在元素滚动时执行 var backtop=document.body.scrollTop; //获取滚动条滚动的垂直距离 if(backtop>=180) { $("#dtop").show(); //若滚动条滚动的垂直距离大于180px,则显示“回到顶部”链接,否则隐藏 } else { $("#dtop").hide(); } } $("#dtop").click(function(){ timer= setInterval(function(){ var backtop= document.body.scrollTop; var speedTop = backtop / 5; document.body.scrollTop = backtop - speedTop; if(backtop == 0) { clearInterval(timer); } },30) //设置计时器，每隔30毫秒调用函数,如果滚动条垂直距离等于零，就调用clearInterval()函数清除计时器 });}); </script>

8、 总之，实现“回到顶部”功能的方法还有很多，并且还可以添加更好看的样式来美化视觉效果。本处不再讨论，读者可以自行实践。 附：本经验关键词：网页返回顶部功能的实现方法、网页回到顶部功能js、网站添加返回顶部功能、jquery 回到顶部、js回到顶部、html回到顶部代码、回到顶部代码、回到顶部