div.go-top {display: none
opacity: 0.6
z-index: 999999
position: fixed
bottom: 113px
left: 90%
margin-left: 40px
border: 1px solid #a38a54
width: 38px
height: 38px
background-color: #eddec2
border-radius: 3px
cursor: pointer}div.go-top:hover {opacity: 1
filter: alpha(opacity=100)}div.go-top div.arrow {position: absolute
left: 10px
top: -1px
width: 0
height: 0
border: 9px solid transparent
border-bottom-color: #cc3333}div.go-top div.stick {position: absolute
left: 15px
top: 15px
width: 8px
height: 14px
display: block
background-color: #cc3333
-webkit-border-radius: 1px
-moz-border-radius: 1px
border-radius: 1px}
使用fixed定位，让按钮始终出现在右下角，通过设定left:90%可以使按钮在右方出现，但又不会太紧贴滚动条。
按钮默认不可见，当滚动页面到一定高度后，按钮出现，这里用jQuery实现
$(function() {$(window).scroll(function() {if ($(window).scrollTop() >1000)$('div.go-top').show() else
$('div.go-top').hide()
}) $('div.go-top').click(function() {$('html, body').animate({scrollTop: 0}, 1000)
})
})
当按下按钮时，有动画效果返回顶部
1、纯js,无动画版本[html] view plain copy
window.scrollTo(x-coord, y-coord)
[html] view plain copy
如：window.scrollTo(0,0)
2、纯js，带动画版本
生硬版：
[html] view plain copy
var scrollToTop = window.setInterval(function() {
var pos = window.pageYOffset
if ( pos >0 ) {
window.scrollTo( 0, pos - 20 )// how far to scroll on each step
} else {
window.clearInterval( scrollToTop )
}
}, 16)// how fast to scroll (this equals roughly 60 fps)
流畅版：
[html] view plain copy
(function smoothscroll(){
var currentScroll = document.documentElement.scrollTop || document.body.scrollTop
if (currentScroll >0) {
window.requestAnimationFrame(smoothscroll)
window.scrollTo (0,currentScroll - (currentScroll/5))
}
})()
3、jQuery,带动画版本
首先需要在顶部添加如下html元素：
[html] view plain copy
<span style="font-size:14px"><p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>
</span>
其中a标签指向锚点top，可以在顶部防止一个<a name="top"></a>的锚点，这样在浏览器不支持js时也可以实现返回顶部的效果了。
要想让返回顶部的图片显示在右侧，还需要一些css样式，如下：
[css] view plain copy
<span style="font-size:14px">/*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?1202) no-repeat -25px -290px
border-radius:6px
display:block
height:64px
width:56px
margin-bottom:5px
/*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/
-moz-transition:background 1s
-webkit-transition:background 1s
-o-transition:background 1s
}
#back-to-top a:hover span{
background:transparent url(/static/imgs/sprite.png?1202) no-repeat -25px -290px
}
</span>
上面样式中的背景图片是雪碧图，下面提供两个单独的返回顶部图片方便朋友们使用：
有了html和样式，我们还需要用js控制返回顶部按钮，在页面滚动时渐隐渐现返回顶部按钮。
[html] view plain copy
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script>
$(function(){
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#back-to-top").fadeIn(1500)
}
else
{
$("#back-to-top").fadeOut(1500)
}
})
//当点击跳转链接后，回到页面顶部位置
$("#back-to-top").click(function(){
//$('body,html').animate({scrollTop:0},1000)
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, 1000)
return false
}
$('body').animate({ scrollTop: 0 }, 1000)
return false
})
})
})
</script>
