描述

让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. 3DMAX安装未完成，某些产品无法安装的解决方法

    3DMAX提示安装未完成,某些产品无法安装该怎样解决呢?,一些朋友在win7或者win10系统下安装3DMAX失败提示3DMAX安装未完成,某些产品无法安装,也有时候想重新安装3DMAX的时候会出现本 ...

  2. Linux(CentOS_7.6)安装Nginx

    1.安装依赖 12 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 2.下载Nginx并解压 1234567 c ...

  3. 从广义线性模型(GLM)理解逻辑回归

    1 问题来源 记得一开始学逻辑回归时候也不知道当时怎么想得,很自然就接受了逻辑回归的决策函数--sigmod函数: 与此同时,有些书上直接给出了该函数与将 $y$ 视为类后验概率估计 $p(y=1|x ...

  4. 让git push命令不再需要密码

    最近利用jekyll写博客,为的就是博客管理方便,但是在上传博客的时候使用git push命令每次都得输入github帐号和密码特别的不方便,于是就搜了一下. 在这篇文章里提到,GitHub获得远程库 ...

  5. jQuery学习笔记三

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

  6. Vimium - 让你体验Geek般的浏览体验

    相信很多电脑高手们都会寻找一一些快捷高效的操作方式,如经常利用键盘的快速操作,让你脱离鼠标,可以让你不用花太多精力地去移动细小的指针进行操作,使得工作的效率提高许多. 不过,实际上很多时候我们还是不得 ...

  7. 【原创】面试官问我G1回收器怎么知道你是什么时候的垃圾？

    这是why技术的第36篇原创文章 上面的图片是我上周末在家拍的.以后的文章里面我的第一张配图都用自己随手拍下的照片吧.分享生活,分享技术,哈哈. 阳台上的花开了,成都的春天快来了,疫情也应该快要过去了 ...

  8. MySQL多表查询、事务、DCL：内含mysql如果忘记密码解决方案

    MySQL多表查询.事务.DCL 多表查询 * 查询语法: select 列名列表 from 表名列表 where.... * 准备sql # 创建部门表 CREATE TABLE dept( id ...

  9. python settings 中通过字符串导入模块

    1. 项目文件结构 set_test ├─ main.py # 入口函数 │ ├─notify # 自定义的模块 │ ├─ email.py # 自定义模块 │ ├─ msg.py # 自定义模块 │ ...

  10. 可视化工作流程设计开发OA系统，一两个程序员就搞定！

    随着信息化的发展,越来越多的公司老板要求实现企业审批流程化.一个公司在初期,人员少,流程简单,员工也会经常不按工作流程来走,甚至有些跨部门的工作因为关系原因,没有走工作流程就实施,导致后期出现问题或者 ...