javascript - 为什么此代码同时使用 `document.body` 和 `document.documentElement` ？

Question

好吧，我想弄清楚这个 JS 代码是如何工作的。你能给我解释一下吗？

这是代码(我复制了一些w3schools的代码，完整:https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_scroll_to_top

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<script>
// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}

function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>

我认为 document.documentElement 意味着它是一个 HTML 并且它包含页面上的所有元素。我错了吗？

那么为什么我们需要在topFunction()中设置两个变量呢？当我删除这一行时:

document.body.scrollTop = 0;

一切仍然有效，那么为什么我们需要这部分代码呢？谢谢。

Answer 1

从问题标题预编辑中:

What's the difference between document.body and document.documentElement?

document.body 是 body 元素。 document.documentElement 是(在 HTML 文档中)html 元素。

So why we need two variable setting in topFunction()?

因为不幸的是，当滚动主窗口的内容时，某些浏览器历史上滚动的是html，而其他浏览器则滚动的是body。您可以在这里尝试您当前的浏览器:

var n, div;
for (n = 1; n <= 100; ++n) {
  div = document.createElement('div');
  div.innerHTML = String(n);
  document.body.appendChild(div);
}
var bodyDisplay = document.getElementById("body-display");
var docElDisplay = document.getElementById("docel-display");

document.addEventListener("scroll", function() {
  bodyDisplay.innerHTML = String(document.body.scrollTop);
  docElDisplay.innerHTML = String(document.documentElement.scrollTop);
});

.top {
  position: fixed;
  height: 2em;
  border-bottom: 1px solid #ddd;
  background: white;
}

<div class="top">
  <div>
    body scrollTop:
    <span id="body-display"></span>
  </div>
  <div>
    documentElement scrollTop:
    <span id="docel-display"></span>
  </div>
</div>
<div>Scroll up and down</div>