JQuery实现回到顶部
浏览数：33 /
时间：2015年06月09日
当一个页面的内容比较长时，一般都在页面的右下角的固定位置有个“回到顶部”的按钮，点击后，页面的滚动条逐渐回滚到顶部，本篇来描述一个它的实现过程。
首先，需要有一个按钮
<button id="btn_top" title="回到顶部">
回到顶部
</button>然后给这个元素定位到右下角，我们使用position：fixed。下面这个按钮加一些最基本的样式
#btn_top {
position: fixed;
bottom: 10px;
right: 10px;
display: none;
}此时，这个按钮并没有显示出来，我们需要当页面的滚动条距离最上方有50个像素时，显示“回到顶部”按钮，通过JQuery来实现
$(function () {
$(window).scroll(function () {
if ($(window).scrollTop() >= 50) {
$(‘#btn_top‘).fadeIn();
}
else {
$(‘#btn_top‘).fadeOut();
}
});
});最后，我们给“回到顶部”的按钮添加一个click事件，通过一个动画来让滚动条滚到最上面
$(‘#btn_top‘).click(function () {
$(‘html,body‘).animate({ scrollTop: 0 }, 500);
});好，大功告成！
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
