使用jQuery实现返回页面顶部

297 阅读1分钟
首先先到jQuery官网下载相应代码

JQU.png

为返回顶部盒子加入相应的CSS设置

css.png

接下来是script部分
先设定一个主要内容盒子距离页面顶端的值

var boxTop = $('.container').offset().top

然后使页面滚动像素值超过其时,显示出返回顶端盒子,同时不超过时不显示

if(¥(document).scrollTop() >= boxTop) {
¥('.back').fadeIn()
}
else {
¥('.back').fadeOut()
}

最后给返回顶端盒子设置点击事件

¥('.back').click(function(){
¥('body,html').stop().animate({
scrollTop:0
})