jQuery制作返回顶部按钮

在如今的网页中，各类人性化的设计层次不穷，在网页文档末尾添加一个返回顶部按钮看似是一个很小的举动，却为整个网页的友好型加分不少，下面就利用jQuery一起制作一个简单的返回顶部按钮。

首先，我们需要在html文档中添加元素，就像这样：

<div id="scrollTop"></div>

然后为它添加一个样式，这而我们要考虑到按钮应该处于页面的哪个地方，常见的是一直存在在我们所见区域的右边，那么我们只要简单使用position:fixed来固定它。另外一种是放在文档底部，滑动到那个地方的时候就显示出来。这儿我们只做第一种。

css样式如下：

#scrollTop {
width: 30px;
height: 30px;
background: url(../image/scrolltop.png) no-repeat;
position: fixed;
right: 20px;
opacity: 0.6;
filter: alpha(opacity=60);
}

#scrollTop:hover{
opacity: 1;
filter: alpha(opacity=100);
cursor: pointer;
}

这儿我们没有设置#scrollTop的top值，因为我们要根据浏览器窗体的大小动态设置，所以在js文件中进行设置。

$(document).ready(function(){
//定位按钮高度且隐藏按钮
$('#scrollTop').css({top:$(window).height()-80}).hide();
//监听滚轮滑动事件
$(window).scroll(function() {
$(window).scrollTop() >0 ? $('#scrollTop').fadeIn(400) : $('#scrollTop').fadeOut(400);
});
//监听按钮点击事件
$('#scrollTop').bind('click',function(){
$('body,html').animate({'scrollTop':0},800,'swing');
});
});

注意这个地方：

$('body,html').animate({'scrollTop':0},800,'swing');

需要写上body和html两个元素，如果不写body，chrome下不能用FF下能用，不写html则相反。具体原因请去了解body和html的区别。

这样一个简单的返回顶部按钮就只做完成了，是不是很简单。

demo下载