1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 手机端html返回顶部 移动端H5页面返回顶部按钮无效问题的解决

手机端html返回顶部 移动端H5页面返回顶部按钮无效问题的解决

时间:2024-07-15 10:22:55

相关推荐

手机端html返回顶部 移动端H5页面返回顶部按钮无效问题的解决

一直都是在PC端写返回顶部的按钮,今天的项目是移动端,页面内容比较多,也有滚动顶部的功能,于是一开始用了原生的的写法,没有用,经过调试,滚动时获取不到滚动的高度。接着又换了一个gototop.js插件,还是无效,同样获取不到距顶部的高度。

用了2个小时调试了这个移动端返回顶部的按钮事件,最后经调试发现是$(window).scroll()和$(window).scrollTop()高度不变,但是 $('body').scroll()、$('body').scrollTop()高度会随着滚动变化,body换成window 解决了,

下面附上代码,为下次使用方便:

html:

css:

/* 公共的浮窗 滚动到顶部 */

.goTop {

position: fixed;

right: 1%;

bottom: 10%;

width: 1rem;

height: 1rem;

z-index: 999;

}

.goTop > img {

width: 1rem;

height: 1rem;

cursor: pointer;

}

js:

// 滚动到顶部

('.goTop').hide();

('body').scrollTop() >= 600) {

('.goTop').fadeOut(300);

}

});

('html,body').animate({ scrollTop: '0px' }, 200);

});

});

这个一个简单实用的小demo,可以直接复制使用~~~~~~~~~~~~

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。