如何用js实现网页中的回到顶部功能？
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回到顶部代码、回到顶部代码、回到顶部