[BUG]document.body.scrollTop=0不生效（回到顶部）
描述
让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不生效（回到顶部）的更多相关文章
- HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现
对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousem ...
- 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...
- document.body.scrollTop 值总为0
http://www.jb51.net/article/21168.htm 页面具有 DTD(或者说指定了 DOCTYPE)时,使用 document.documentElement. 做页面 ...
- document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
转自http://wo13145219.iteye.com/blog/2001598 一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取do ...
- document.body.scrollTop无效的解决方法
1.document.body.scrollTop = 0 有时候不生效,两种解决方案,试试看. 1-1.设置:document.documentElement.scrollTop = 0;1-2.设 ...
- document.body.scrollTop 各浏览器兼容性解决
document.compatMode:获取当前浏览器采用的渲染方式.主要是浏览器的模式,有两个:BackCompat,CSS1Compat.其中前者是怪异模式,后者是标准模式. IE默认是BackC ...
- UEditor图片焦点错位,火狐document.body.scrollTop不管用的问题
转自 http://liyunpeng.iteye.com/blog/2068751 关于 document.body.scrollTop 在火狐浏览器中不管用的问题 看网上有人写通过判断docume ...
- document.documentElement.scrollTop
要获取当前页面的滚动条纵坐标位置, 用: document.documentElement.scrollTop; 而不是: document.body.scrollTop; doc ...
- document.documentElement.scrollTop指定位置失效解决办法
近期在vue的H5项目中,做指定位置定位的时候发现使用document.documentElement.scrollTop一直不生效. 解决办法是document.documentElement.sc ...
随机推荐
- 新特DEV1光速发布背后：原来“开公司”也能风驰电掣
去年12月16日,总融资额达到200亿元的蔚来汽车正式推出电动SUV车型ES8:去年12月22日,威马汽车宣布最新一轮融资,累计获得120亿元的融资额:今年1月29日,小鹏汽车宣布启动总额为22亿元人 ...
- php 依赖注入 和 控制反转 php设计模式
https://blog.csdn.net/zyddj123/article/details/82753650 什么是依赖注入?IOC:英文全称:Inversion of Control,中文名称:控 ...
- spring security之Remember Me
spring-security.xml配置 环境: spring版本:5.0.7.RELEASE spring-security.xml引入: http://www.springframework.o ...
- a, b = a, a+b 和a=b b=a+b的区别
n,a,b=0,0,1 while n<5: print(b) a,b=b,a+b n=n+1 和 n,a,b=0,0,1 while n<5: print(b) a=b b=a+b n= ...
- <JZOJ5938>分离计划
emm骚操作 #include<cstdio> #include<iostream> #include<cstring> #include<algorithm ...
- python socket粘包及实例
1.在linux中经常出现粘包的出现(因为两个send近靠着,造成接受到的数据是在一起的.)解决方法: 在服务端两send的中间中再添加一个recv(),客户端添加一个send(),服务端收到信息确认 ...
- 奇葩念头：微信能取代WP应用吗
墙倒众人推,原本是再平常不过的事,但每次发生都显得特别凄凉--就和楼市买房买涨不买跌一样,在互联网行业,用户数量越多的产品或服务,就会越受到行业和大众青睐.而越是小众的产品或服务,虽然是要走 ...
- 如何在windows server上安装 Windows评估和部署工具包
此文是<.NET内存宝典>一书的售后服务系列文章之一. 在<.NET内存宝典>一书(目前我还在翻译本书,预计年底出版)的第3章 “内存测量”里的“Windows性能工具包”一节 ...
- 进阶之路 | 奇妙的Handler之旅
前言 本文已经收录到我的Github个人博客,欢迎大佬们光临寒舍: 我的GIthub博客 需要已经具备的知识: Handler的基本概念及使用 学习导图: 一.为什么要学习Handler? 在Andr ...
- 差分放大电路的CMRR与输入电阻分析
分析了经典差分放大电路的共模抑制比CMRR与输入电阻RIN 1.经典差分放大电路 基于运放的经典差分放大电路在各模电教材中均能找到,利用分离电阻和运算放大器实现,如图1所示为一种差分放大电路: 图1 ...