描述

让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. LeetCode Day 4

    LeetCode0011 给定 n 个非负整数 a1,a2,...,an,每个数代表坐标中的一个点 (i, ai) .在坐标内画 n 条垂直线,垂直线 i 的两个端点分别为 (i, ai) 和 (i, ...

  2. Qt QImage的浅拷贝与深拷贝

    首先简单说说什么是浅拷贝和深拷贝:浅拷贝就比如像引用类型,而深拷贝就比如值类型,即浅拷贝是共用一块内存的,而深拷贝是复制一份内容. 我们再来看看QImage类的几个构造函数: // 浅拷贝 QImag ...

  3. h指数|JCR|ORCID|CCC|Research ID|BKCI|

    h指数有如下缺点: 年龄大且平庸的学者比杰出的青年学者的h-index大.学科之间h指数的评价标准不同.有时候,审稿人暗示作者引用自己文章. 再此处可找到相关信息: JCR上可以查询到影响因子,以下是 ...

  4. <JZOJ5904>刺客信条

    然鹅考场上打错某变量名导致30都没有 调了很久因为 没转换double 死亡 #include<cstdio> #include<algorithm> #include< ...

  5. Ionic3学习笔记（九）关于 Android 端软键盘弹出后界面被压缩的问题

    本文为原创文章,转载请标明出处 今天做了一个如下图所示的页面. iOS 端毫无 bug,Android 端却出现了问题.当软键盘弹出后,Android 端的 tabs 移到了软键盘的上面,再仔细一看, ...

  6. JavaScript if为true的情况

    变量如果不为0,null,undefined,false,都会被处理为true.只要变量有非0的值或是某个对象,数组,字符串,都会认为true

  7. rpm报错warning: /var/tmp/rpm-tmp.1OZa8q: Header V3 DSA/SHA1 Signature, key ID 5072e1f5: NOKEY的解决

    参考链接:http://blog.51cto.com/zymin0823/1546537 报错: 解决:使用如下两个选项

  8. 自研测试框架ktest介绍（适用于UI和API）

    iTesting,爱测试,爱分享 在自动化测试的过程中,测试框架是我们绕不过去的一个工具,无论你是不需要写代码直接改动数据生成脚本,还是你需要检查测试结果甚至持续集成,测试框架都在发挥它的作用. 不同 ...

  9. grpc调试工具

    grpcurl 和 grpcui 都是调试grpc的利器,前者用于命令行,类似curl工具:后者是以web的形式进行调试的,类似postman工具. 有了这两款工具,我们不用写任何客户端代码,也能方便 ...

  10. 初学Qt——tableview操作

    先做简短记录改天有空再详细讲一些吧 使用QSqlQueryModel绑定了TableView,因为需要用到数据表中Id这一项,但又不想显示出来,找到方法是 在绑定之后对tableView 调用setC ...