描述

让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. undefined reference to 问题汇总及解决方法 ----- 还有一种问题没有解决（可能是顺序问题）

    1.链接时缺失了相关的目标文件 2.链接时缺少了相关的库文件 3.链接的库文件中有使用了另一个库文件 4.多个库文件链接顺序问题 5.定义与实现不一致 6.在c++代码中链接C语言的库   转载地址: ...

  2. FileZilla相关配置说明

    相关下载可以直接到官网,或者阿里云帮助:https://help.aliyun.com/knowledge_detail/36243.html?spm=5176.10695662.1996646101 ...

  3. Trailing Zeroes (III) LightOJ - 1138 二分+找规律

    Time Limit: 2 second(s) Memory Limit: 32 MB You task is to find minimal natural number N, so that N! ...

  4. 关于angular跳转路由之后不能自动回到顶部的解决方法

    Question: angular2 scroll top on router change 当我们在第一个路由滑动到底部当我们点击导航跳转到另一个路由时页面没有回到顶部而是保持上一个路由的滚动位置, ...

  5. mac 下openOffice服务的安装

    1.安装准备 安装 Homebrew 及 Homebrew-Cask Homebrew 是一个Mac上的包管理工具.使用Homebrew可以很轻松的安装缺少的依赖. Homebrew-Cask是建立在 ...

  6. 吴裕雄--天生自然 python语言数据分析：开普勒系外行星搜索结果分析

    import pandas as pd pd.DataFrame({'Yes': [50, 21], 'No': [131, 2]}) pd.DataFrame({'Bob': ['I liked i ...

  7. axios 二次封装

    一般项目往往要对 axios 库进行二次封装,添加一些自定义配置和拦截器等 案例 ./service/axios.js 1234567891011121314151617181920212223242 ...

  8. nginx在反向代理侧实现ssl

    被代理的webserver为lnmp项目,现在需要在反向代理侧使用nginx实现ssl的反向代理(域名解析在反代的ip上),配置如下: upstream XXX { server 192.168.0. ...

  9. jQuery学习笔记三

    使用fadeIn()js解释器会将所选元素的CSS opacity属性从0改为100,fadeTo()会动画显示所选元素,将它为改为某个特定的透明度百分比,使用fadeOut()js解释器会将所选元素 ...

  10. Zookeeper的核心概念以及java客户端使用

    一.Zookeeper的核心概念 分布式配置中心(存储):disconf(zk).diamond(mysql+http) 1)znode ZooKeeper操作和维护的是一个个数据节点,称为 znod ...