描述
讓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;