View demo Download
第一步:建一个div
<div id="toTop">返回顶部</div>
第二步:给这个div设计样式
#toTop {
width:100px;
border:1px solid #ccc;
background:#f7f7f7;
text-align:center;
padding:5px;
position:fixed;
bottom:10px;
right:10px;
cursor:pointer;
display:none;
color:#333;
}
第三步:使用Jquery实现网页下滑时显示“返回顶部”按钮
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
第四步:使用Jquery实现点击后到达顶部功能
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},800);
});