描述

让body回滚到最顶部，设置 document.body.scrollTop = 0; 。

微信内，安卓设备可以，IOS设备不可以。

 

原因

MDN中 scrollTop是这样定义的

一个元素的 scrollTop 值是这个元素的顶部到视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

简单来说，scrollTop是这个元素的内容相对于自己向上滚动的高度。

ios设备中没问题，但是安卓设备 body 比较特殊，即使body没有限制高度，body的内容没有相对于自己滚动，也会有 scrollTop 值。

然而如果限制了body高度，让body的内容相对于自己滚动， ios设备中 body.scrollTop 有值， 安卓设备 body.scrollTop 始终为0。

在线演示（移动端打开）

 

解决方案

不使用body，在body内部设置最大容器root盒子, 然后操作root盒子。

html,

body,

#root {

    height: 100%;

}

#root {

    overflow: auto;

}


<body>

    <div id="root">

        <!-- 这里放内容 -->

    </div>

</body>


document.getElementById('root').scrollTop = 0;

[BUG]document.body.scrollTop=0不生效（回到顶部）的更多相关文章

  1. HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现

    对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousem ...

  2. 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...

  3. document.body.scrollTop 值总为0

    http://www.jb51.net/article/21168.htm 页面具有 DTD(或者说指定了 DOCTYPE)时,使用 document.documentElement.     做页面 ...

  4. document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题

    转自http://wo13145219.iteye.com/blog/2001598 一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取do ...

  5. document.body.scrollTop无效的解决方法

    1.document.body.scrollTop = 0 有时候不生效,两种解决方案,试试看. 1-1.设置:document.documentElement.scrollTop = 0;1-2.设 ...

  6. document.body.scrollTop 各浏览器兼容性解决

    document.compatMode:获取当前浏览器采用的渲染方式.主要是浏览器的模式,有两个:BackCompat,CSS1Compat.其中前者是怪异模式,后者是标准模式. IE默认是BackC ...

  7. UEditor图片焦点错位,火狐document.body.scrollTop不管用的问题

    转自 http://liyunpeng.iteye.com/blog/2068751 关于 document.body.scrollTop 在火狐浏览器中不管用的问题 看网上有人写通过判断docume ...

  8. document.documentElement.scrollTop

    要获取当前页面的滚动条纵坐标位置, 用:      document.documentElement.scrollTop; 而不是:      document.body.scrollTop; doc ...

  9. document.documentElement.scrollTop指定位置失效解决办法

    近期在vue的H5项目中,做指定位置定位的时候发现使用document.documentElement.scrollTop一直不生效. 解决办法是document.documentElement.sc ...

随机推荐

  1. maven依赖找不到,快速解决

    以微信支付依赖为例子 wxpay-sdk-3.0.9.jar1.阿里云仓库搜索地址https://maven.aliyun.com/mvn/search 2.搜索你要找的依赖,对号入座 3.确保mav ...

  2. 翻译：谷歌HTML、CSS和JavaScript风格规范

    我喜欢浏览风格规范.他们通常有明显的规则,虽然有些有荒诞之感,但是却可以发现之前未注意到的宝石.不幸的是,鲜有公司有这个勇气来发布自己内部的风格规范.BBC 2010年时候公开其文档以及Google最 ...

  3. RROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2

    RROR 2002 (HY000): Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (2 ...

  4. MobX中@computed和自定义get函数的区别

    首先这两者解决方法都会得到一个相同的结果,但使用@computed的意义在于它能够由MobX进行更智能的优化. 如果我不使用computed属性,直接使用自定义的getTheValue函数的话,那么一 ...

  5. Android 一个3D相册源码

    我们专业课有Android的学习,最后老师让做一个简单的Android应用程序.我在网上找些资料,加上自己改造一下做了一个3D相册. 程序仿照Android的相册功能,调用Gallery类对相片进行浏 ...

  6. 阿里投资Magic Leap 是美酒还是毒药?

    Leap 是美酒还是毒药?" title="阿里投资Magic Leap 是美酒还是毒药?"> 土豪阿里又摊上"大事"了!但这次不是让人头痛的假 ...

  7. HTC“卖身”：那些辉煌、落寞与终结

    9月21日,HTC董事会决议通过与谷歌签订合作协议书.前者专注Pixel手机设计研发人才加入谷歌,HTC知识产权非专属授权予Google使用,交易作价11亿美元.事实上,这与微软收购诺基亚不同,并非是 ...

  8. UEditor问题整理

    网上可以使用的富文本编辑器有很多,但是经过慎(sui)重(shou)思(yi)考(cha),选择了UEditor,毕竟是百度的东西,质量上应该经得起推敲,另外,使用别人的插件,总要去适应别人的编码习惯 ...

  9. 【51nod1462】树据结构

    Source and Judge 51nod1462 Analysis 请先思考后再展开 dffxtz师兄出的题 做法一:暴力树剖+分块,时间复杂度为 $O(nlognsqrt n)$ 做法二:利用矩 ...

  10. 连接器巨头Molex莫仕：替代品厂PK原厂

    序言:在中国电子产业,原厂PK替代品厂一直是一个极具话题性.美国在贸易战背景下,挤压中国的发展空间,迫使这一类企业要觉醒.当然受影响的不止中国电子企业,美国电子企业也一样. 在连接器这一领域,Mole ...