关于JS回到顶部代码：为何同时使用document.body与document.documentElement？

嘿，这个问题问得特别棒！让我一步步给你理清楚：

你的判断完全没错！document.documentElement就是指向HTML文档里的<html>根元素，它是整个DOM树的顶层容器，页面里所有的内容——不管是<head>里的元信息，还是<body>里的文本、图片、组件——全都是它的子节点。可以说它就是页面所有元素的“总家长”~

先给你还原一下那段代码里的关键部分：

function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}

这两行代码本质是浏览器兼容性处理！

• 旧版本的Safari浏览器中，记录页面滚动距离的属性是document.body.scrollTop；
• 而Chrome、Firefox、IE以及现代Opera这些浏览器，滚动距离是存在于document.documentElement.scrollTop（也就是<html>元素的scrollTop）中的。

虽然现在不少现代浏览器已经同时支持这两个属性，但为了让你的“回到顶部”功能能覆盖尽可能多的用户（包括那些还在使用旧版浏览器的人），同时保留这两行是非常必要的。你删掉其中一行在当前浏览器可能没问题，但换个环境说不定就失效了哦。

内容的提问来源于stack exchange，提问作者Elise Svart