1、 首先打开sublime text 3，点击左上方，文件，新建一个html文件，并命名。如图所示：
2、 在body中加入div标签，div中放一个超链接，超链接中放一劢实醭萱张图片，提示为“返回顶部”。然后在title下写css样式。如图所示： html ,css代码如下 ：<div id="dtop"> <a href="javascript:;"> <img src="images/b.gif" title="返回顶部" /> </a> </div> body { height: 1800px; } #dtop { position: fixed; /*固定位置*/ right: 10px; bottom: 40px; display: none; /*开始默认隐藏*/ margin-bottom: 5px; width: 40px; height: 36px; border-radius: 2px; cursor: pointer; }
3、 然后写js代码。首先，要引入jQuery库文件，并且放所写的js代码上面，不然不会有效果的。相关jQuery库文件可以在jQuery官网下载。如图：
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>
5、 接着，写点击事件。设置一个计时器，每隔30毫秒调用该函数,如果滚动条垂直距离等于零，就调用clearInterval()函数清除计时器。$("#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()函数清除计时器 });});
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回到顶部代码、回到顶部代码、回到顶部
