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

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

每当我们在各种网站上浏览信息时，细心的朋友可能会注意到，当鼠标向下滚动到一定距离时，很多网站都会出现一个提示"回到顶部"的标志。例如淘宝网，点击该标志，便可以快速地回到网页最顶部。这是许多网站设计者在用户体验方面需要考虑的重要因素之一。

那么，如何实现这一简单的功能呢？下面，小编来为大家讲解一下，怎样用js实现简单的回到顶部功能吧！

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

在body中加入div标签，div中放一个超链接，超链接中放一张图片，提示为“裁昆返回顶部”。然后在title下写css样式。如图所示：

html ,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;

}

然后写js代戴荡码。首先，要引入jQuery库文件，并且放所写的js代码上面，不然不会有效果的。相关jQuery库文件可以在jQuery官网下载。如图：

js代码中，首先定义一个变量timer ，赋值为null。再定义变量pageHeight获取可视区域的高度。然后触发一个onscroll事件，在元素滚动时执行。函数中定义局部变量backtop，获取滚动条的垂直距离，若滚动条的垂直距离大于180px,则显示“回到顶部”链接,否则隐藏。代码如下：

接着，写点击事件。设置一个计时器，每隔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()函数清除计时器

});

});

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

于是，简单的“回到顶部”功能就完成了。是不是很简单？完整js代码如下：

总之，实现“回到顶部”功能的方法还有很多，并且还可以添加更好看的样式来美化视觉效果。本处不再讨论，读者可以自行实践。

附：本经验关键词：网页返回顶部功能的实现方法、网页回到顶部功能js、网站添加返回顶部功能、jquery 回到顶部、js回到顶部、html回到顶部代码、回到顶部代码、回到顶部