js+JQuery实现返回顶部功能

1、纯js,无动画版本

window.scrollTo(0,0);

2、纯js，带动画版本

生硬版：

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)

流畅版：

(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元素：

<p id="back-to-top"><a href="#top">返回顶部</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;
}

jquery代码：
<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);
return false;
});
});
});
</script>