怎样用JAVASCRIPT/JQUERY制作网站回到顶部功能
1、 前端用到的编辑器有很多，本例通过选择Dreamweaver CS6编辑器来制作网站回到顶部功能。第一步，打开电脑中安装的Dreamweaver CS6，新建demo文件夹用来存放文件，在里面新建一个html文件，并命名标题。如图：
2、 第二步，写HTML代码及引入外部样式和脚本文件。在Body标签中加入一个DIV标签，DIV中放一个超链接a标签，超链接中放一张gif图片，提示信息为“返回顶部”。然后，在顶部head标签里引入CSS文件（由于本例比较简单，选择在style标签中写）。接着，下载好相关的库文件后，我们将JQuery文件放在Body标签底部。注意要引入JQuery库，不然你写的JQuery不会有效果的（相关jQuery库文件可以在jQuery官网下载）。HTML代码如下：
<div id="dtop">
<a href="javascript:;">
<img src="images/b.gif" title="返回顶部" />
</a>
</div>
3、 第三步，写相关CSS代码。其中，position: fixed; 用来固定图片，并且设置图片在右下角位置。默认不可见。相关的CSS代码如下：
body {
height: 1800px;
}
#dtop {
position: fixed; /*固定位置*/
right: 10px;
bottom: 40px;
display: none; /*开始默认隐藏*/
margin-bottom: 5px;
width: 40px;
height: 36px;
border-radius: 2px;
cursor: pointer;
}
4、 第四步，写JQuery代码。首先定义一个变量timer ，赋值为null。再定义一个名为pageHeight的变量，用来获取可视区域的高度。然后触发一个onscroll 事件，在元素滚动时执行。函数中定义局部变量backtop，获取滚动条的垂直距离。假设设置若滚动条的垂直距离大于180px,则显示“回到顶部”图标链接,否则隐藏。相关的CSS代码如下：
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();
}
}
5、 第五步， 接着，写点击事件。其中，设置一个计时器，每隔30毫秒调用该函数,若滚动条垂直距离等于零，即到了最顶部，就调用clearInterval()函数清除计时器；document.body.scrollTop = backtop - speedTop;表示设置回到顶部时的上升速度由快到慢（因为scrollTop 的大小变化由大变小），如果你设置document.body.scrollTop-=100; 表示均速上升。相关的CSS代码如下：
$("#dtop").click(function(){
timer= setInterval(function(){
var backtop= document.body.scrollTop;//获取滚动条滚动的垂直距离
var speedTop = backtop / 5;
document.body.scrollTop = backtop - speedTop;//设置上升速度由快到慢，如设置document.body.scrollTop-=100; 表示均速上升
if(backtop == 0) {
clearInterval(timer);
}
},30) //如果滚动条垂直距离等于零，即到了最顶部，就调用clearInterval()函数清除计时器
});
6、 第六步，JQuery代码完成。于是，就实现了简单的网站回到顶部功能了。我们点击上面的“在浏览器中预览”图标，查看效果（其实每写完一步代码就应该查看效果，即调试）。完整的JQuery代码如下图：
<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;//设置上升速度由快到慢，如设置document.body.scrollTop-=100; 表示均速上升
if(backtop == 0) {
clearInterval(timer);
}
},30) //如果滚动条垂直距离等于零，即到了最顶部，就调用clearInterval()函数清除计时器
});
});
</script>
7、 最后，在浏览器中查看效果。可以看到，页面载入时是空白，因为图标默认隐藏。当鼠标向下移动到一定距离时，出现提示“回到顶部”的图标，点击它，便回到了页面最顶部。如图所示，读者可以自行实践。
附：本经验关键词：网站回到顶部功能的实现方法、JAVASCRIPT制作网页回到顶部功能、网站添加返回顶部功能、jquery 回到顶部、JAVASCRIPT回到顶部、html回到顶部代码、DREAMWEAVER制作回到顶部代码、回到顶部、返回顶部
