怎样用JAVASCRIPT/JQUERY制作网站回到顶部功能

1、 前端用到的编辑器有很多，本例通过选择Dreamweaver CS6编辑器来制作网站回到顶部功能。第一步，打开电脑中安装的Dreamweaver CS6，新建demo文件夹用来存放文件，在里面新建一个html文件，并命名标题。如图：

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; }

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()函数清除计时器 });

7、 最后，在浏览器中查看效果。可以看到，页面载入时是空白，因为图标默认隐藏。当鼠标向下移动到一定距离时，出现提示“回到顶部”的图标，点击它，便回到了页面最顶部。如图所示，读者可以自行实践。 附：本经验关键词：网站回到顶部功能的实现方法、JAVASCRIPT制作网页回到顶部功能、网站添加返回顶部功能、jquery 回到顶部、JAVASCRIPT回到顶部、html回到顶部代码、DREAMWEAVER制作回到顶部代码、回到顶部、返回顶部