移动端返回顶部,应该是大多数移动端网页都会有的一个功能,或者只在首页有,或者在资讯里添加,当页面滚动一定距离之后,能迅速返回页面顶部,不用再多次下滑滚动页面了,其思路都是一样的:利用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);在网站上是可以的,但发布到移动端则不生效。