(编辑：jimmy 日期: 2026/4/30 浏览：2)
很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现返回顶部按钮。
首先需要在顶部添加如下html元素：
<p id="back-to-top"><a href="#top" rel="external nofollow" ><span></span>返回顶部</a></p>
其中a标签指向锚点top，可以在顶部防止一个<a name="top"></a>的锚点，这样在浏览器不支持js时也可以实现返回顶部的效果了。
要想让返回顶部的图片显示在右侧，还需要一些css样式，如下：
/*returnTop*/
p#back-to-top{
position:fixed;
display:none;
bottom:100px;
right:80px;
}
p#back-to-top a{
text-align:center;
text-decoration:none;
color:#d1d1d1;
display:block;
width:64px;
/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/
-moz-transition:color 1s;
-webkit-transition:color 1s;
-o-transition:color 1s;
}
p#back-to-top a:hover{
color:#979797;
}
p#back-to-top a span{
background:transparent url(/static/imgs/sprite.png"//img.jbzj.com/file_images/article/201408/201408191041252.gif" alt="" />
有了html和样式，我们还需要用js控制返回顶部按钮，在页面滚动时渐隐渐现返回顶部按钮。
<script src="/UploadFiles/2021-04-02/jquery-1.7.2.min.js">
这样就可以了。
注意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图。