一直都是在PC端写返回顶部的按钮,今天的项目是移动端,页面内容比较多,也有滚动顶部的功能,于是一开始用了原生的的写法,没有用,经过调试,滚动时获取不到滚动的高度。接着又换了一个gototop.js插件,还是无效,同样获取不到距顶部的高度。
用了2个小时调试了这个移动端返回顶部的按钮事件,最后经调试发现是$(window).scroll()
和 $(window).scrollTop()
高度不变,但是 $('body').scroll()
、$('body').scrollTop()
高度会随着滚动变化,body换成window 解决了,
下面附上代码,为下次使用方便:
html部分:
<!-- 滚动到顶部 -->
<div class="goTop" id="js-go_top"><img src="./images/icon_top.png" alt="回到顶部"></div>
css部分:
/* 公共的浮窗 滚动到顶部 */
.goTop {
position: fixed;
right: 1%;
bottom: 10%;
width: 1rem;
height: 1rem;
z-index: 999;
}
.goTop > img {
width: 1rem;
height: 1rem;
cursor: pointer;
}
js部分:
// 滚动到顶部
$(function() {
$('.goTop').hide();
$('body').scroll(function() {
if ($('body').scrollTop() >= 600) {
$('.goTop').fadeIn(300);
} else {
$('.goTop').fadeOut(300);
}
});
$('.goTop').click(function() {
$('html,body').animate({ scrollTop: '0px' }, 200);
});
});
这个一个简单实用的小demo,可以直接复制使用哦,一起加油哦