1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 移动端返回顶部问题

移动端返回顶部问题

时间:2021-02-02 05:46:00

相关推荐

移动端返回顶部问题

移动端返回顶部,应该是大多数移动端网页都会有的一个功能,或者只在首页有,或者在资讯里添加,当页面滚动一定距离之后,能迅速返回页面顶部,不用再多次下滑滚动页面了,其思路都是一样的:利用scrollTop定位道顶部;或者利用a标签设置顶部锚点。

html

<div class="to-top" id="toTop"><img src="~/image/to-top.png" class="top-btn" /></div>

js

<script>dom = document.getElementById('toTop');dom.addEventListener('touchend', function (e) {$('html,body').animate({ scrollTop: 0 }, 0);})</script>

注意两个问题:

1、click功能在移动端不是那么好用,最好用touch的一系列设置,

触摸事件,有touchstart touchmove touchend touchcancel 四种之分

touchstart:手指触摸到屏幕会触发

touchmove:当手指在屏幕上移动时,会触发

touchend:当手指离开屏幕时,会触发

touchcancel:可由系统进行的触发,比如手指触摸屏幕的时候,突然alert了一下,或者系统中其他打断了touch的行为,则可以触发该事件

2、window.scroll在移动端也不好用,$('window').animate({ scrollTop: 0 }, 0);在网站上是可以的,但发布到移动端则不生效。

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