每当我们在各种网站上浏览信息时，细心的朋友可能会注意到，当鼠标向下滚动到一定距离时，很多网站都会出现一个提示"回到顶部"的标志。例如淘宝网，点击该标志，便可以快速地回到网页最顶部。这是许多网站设计者在用户体验方面需要考虑的重要因素之一。那么，如何实现这一简单的功能呢？下面，小编来为大家讲解一下，怎样用js实现简单的回到顶部功能吧！
工具/原料
SublimeText3编辑器(也可选择其他编辑器)
GoogleChrome浏览器(或其他浏览器)
主要步骤
1、首先打开sublimetext3，点击左上方，文件，新建一个html文件，并命名。如图所示：
2、在body中加入div标签，div中放一个超链接，超链接中放一劢实醭萱张图片，提示为“返回顶部”。然后在title下写css样式。如图糁钶茏收所示：html,css代码如下：<divid="dtop"> <ahref="javascript:;"><imgsrc="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,则显示“回到顶部”链接,否则隐藏。代码如下：<scripttype="text/javascript">$(function(){vartimer=null;varpageHeight=document.documentElement.clientHeight;//获取可视区域的高度window.onscroll=function(){//onscroll事件在元素滚动时执行varbacktop=document.body.scrollTop;//获取滚动条滚动的垂直距离if(backtop>=180){$("#dtop").show();//若滚动条滚动的垂直距离大于180px,则显示“回到顶部”链接,否则隐藏}else{$("#dtop").hide();}}</script>
5、接着，写点击事件。设置一个计时器，每隔30毫秒调用该函数,如果滚动条垂直距离等于零，就调用clearInterval()函数清除计时器。$("#dtop").click(function(){timer=setInterval(function(){varbacktop=document.body.scrollTop;varspeedTop=backtop/5;document.body.scrollTop=backtop-speedTop;if(backtop==0){clearInterval(timer);}},30)//设置计时器，每隔30毫秒调用函数,如果滚动条垂直距离等于零，就调用clearInterval()函数清除计时器});});
6、最后，在浏览器中查看结果。可以看到，刚开始是空白，因为图标默认隐藏。当鼠标向下移动到一定距离时，出现“回到顶部”图标，点击，便回到了顶部。如图：
7、于是，简单的“回到顶部”功能就完成了。是不是很简单？完整js代艨位雅剖码如下：<scriptty禊诬娱飑pe="text/javascript">$(function(){vartimer=null;varpageHeight=document.documentElement.clientHeight;//获取可视区域的高度window.onscroll=function(){//onscroll事件在元素滚动时执行varbacktop=document.body.scrollTop;//获取滚动条滚动的垂直距离if(backtop>=180){$("#dtop").show();//若滚动条滚动的垂直距离大于180px,则显示“回到顶部”链接,否则隐藏}else{$("#dtop").hide();}}$("#dtop").click(function(){timer=setInterval(function(){varbacktop=document.body.scrollTop;varspeedTop=backtop/5;document.body.scrollTop=backtop-speedTop;if(backtop==0){clearInterval(timer);}},30)//设置计时器，每隔30毫秒调用函数,如果滚动条垂直距离等于零，就调用clearInterval()函数清除计时器});});</script>
8、总之，实现“回到顶部”功能的方法还有很多，并且还可以添加更好看的样式来美化视觉效果。本处不再讨论，读者可以自行实践。附：本经验关键词：网页返回顶部功能的实现方法、网页回到顶部功能js、网站添加返回顶部功能、jquery回到顶部、js回到顶部、html回到顶部代码、回到顶部代码、回到顶部