描述

让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. Nginx笔记总结二十:nginx索引目录配置

    location / { autoindex on; autoindex_localtime on; }

  2. 关于JavaScript中的基本类型

    1.在JavaScript的数据中包含以下两种 1 基本类型 Number.Boolean.String.NULL.Undefined 以及ES6的 Symbol 2 引用类型 Object.Arra ...

  3. Elegy written in a country church-yard

    分享一首好诗:托马斯·格雷的<墓地哀歌>. "ELEGY WRITTEN IN A COUNTRY CHURCH-YARD" The curfew tolls the ...

  4. 从846家初创倒下 看A轮融资后的悬崖

    看A轮融资后的悬崖" title="从846家初创倒下 看A轮融资后的悬崖"> 相比往年,今年的寒冷冬天来得更早.在互联网行业,今年的"大雪"更 ...

  5. Jquery 实现原理深入学习(3)

    前言 1.总体结构 √ 2.构建函数 √ 3.each功能函数实现 √ 4.map功能函数实现 √ 5.sizzle初步学习 6.attr功能函数实现 7.toggleClass功能函数实现(好伤) ...

  6. async/await实现图片的串行、并行加载

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Java入门教程八(面向对象)

    对象概念 一切皆是对象.把现实世界中的对象抽象地体现在编程世界中,一个对象代表了某个具体的操作.一个个对象最终组成了完整的程序设计,这些对象可以是独立存在的,也可以是从别的对象继承过来的.对象之间通过 ...

  8. sql服务器第5级事务日志管理的阶梯：完全恢复模式下的日志管理

    sql服务器第5级事务日志管理的阶梯:完全恢复模式下的日志管理 原文链接http://www.sqlservercentral.com/articles/Stairway+Series/73785/ ...

  9. Samtec与Neoconix达成合作并和II-VI推出新产品

    序言:Samtec近日动作不断, 近日Samtec与Neoconix达成合作并和II-VI推出新产品,以下是详细内容. Samtec与Neoconix签订Neoconix PCBeam 技术授权协议, ...

  10. java反序列化-ysoserial-调试分析总结篇(4)

    1.前言 这篇文章继续分析commoncollections4利用链,这篇文章是对cc2的改造,和cc3一样,cc3是对cc1的改造,cc4则是对cc2的改造,里面chained的invoke变成了i ...