很多网站都有重回巅峰的效果。本文描述了如何使用jquery实现返回顶部的按钮。首先需要在顶部添加以下html元素：p id=' back-to-top ' a href=' # top ' span/span back to top/a/p，其中一个标签指向锚点顶部，可以防止顶部出现一个名为='top'/a的锚点，这样即使浏览器不支持js也能达到返回顶部的效果。需要一些css样式才能使返回顶部的图片显示在右侧，如下：复制代码如下：/* return top */p # back-to-top {位置：固定；display:nonebottom:100pxright:80px} p #背对顶a { text-align : center；文本装饰： none；color : # D1 D1；显示：块；宽度：64 px；/*使用CSS3中的transition属性为跳转链接中的文本添加渐变效果*/-moz-transition : color 1s；-web kit-transit : color 1s；-o-transit : color 1s；} p #回到顶部a:hover { color: # 979797} p #背靠背a span { background : transparent URL(/static/imgs/sprite . png？1202)无重复-25px-290 px；border-radius :6 px；显示：块；height:64px宽度：56 px；边距-bottom :5 px；/*使用CSS3中的transition属性为span label */-moz-transition :背景1s的背景色添加渐变效果；-web kit-transit : background 1s；-o-transit : background 1s；} #从头到尾a :悬停span { background : transparent URL(/static/imgs/sprite . png？1202)无重复-25px-290 px；}以上风格的背景图为雪碧，下面提供两张单独的后顶图供朋友使用：。

有了html和style，我们还需要使用js来控制后顶按钮，并在页面滚动时淡入淡出。复制的代码如下： script src=' http 3360http://Ajax . Microsoft.com/Ajax/jquery/jquery-1 . 7 . 2 . min . js '/script script $(function(){//当滚动条的位置距离顶部不足100像素时，出现Jump，否则消失$ (function () {$ (window))。滚动(函数(){if ($ (window))。scrolltop () 100) {$ ('#背靠背')。法丁(1500年)；} else { $('#back-to-top ')。fade out(1500)；} });//点击跳转链接后，回到页面的顶部位置$ ('#背靠背')。单击(function () {$ ('body，html ')。动画({scrolltop33600}，1000)；返回false});});});/脚本就是这样。可以通过下面的地址观看实际效果。 http://outofmemory.cn/code-snippet/tagged/javascript请注意，加载页面后，您需要稍微向下拖动滚动条，才能看到效果图返回顶部。