【问题标题】：scrollTo() function does nothingscrollTo() 函数什么都不做
【发布时间】：2018-02-11 13:54:49
【问题描述】：

我想使用 vanilla JS 滚动到页面底部，但遇到了问题。下面的代码应该滚动到页面底部：

window.scrollTo(0,document.body.scrollHeight);

而它所做的只是在控制台中记录“未定义”。输入

document.body.scrollHeight

返回一个整数 736。除此之外，无论我在函数的参数中输入什么，都不会发生任何事情。更重要的是，它只发生在一个网站上。重要的是（不确定）网站隐藏了它的垂直滚动条，即使它有一个很长的内容列表。

【问题讨论】：

标签： javascript google-chrome scrollbar

【解决方案1】：

如果您尝试像 var a = 5 一样在浏览器的控制台中输入，您也会得到未定义的结果。碰巧你的例子和我的没有返回任何东西。

【讨论】：

【解决方案2】：

已解决。这是必须要做的：

document.getElementsByTagName('body')[0].style.display = "block";

无论出于何种原因，将显示更改为“块”启用了使用给定代码的滚动：

window.scrollTo(0,document.body.scrollHeight);

【讨论】：

【解决方案3】：

在页面中放置一些内容，例如设置 body heigth = 1500px，然后尝试执行相同的代码。

【讨论】：

【解决方案4】：

问题可能是您在网站上的实际滚动不是body 的滚动，而是该正文中另一个元素的滚动。

这是一个例子：

$('#btn1').click(function() {
  window.scrollTo(0,document.body.scrollHeight);
});
$('#btn2').click(function() {
  el = $('.a')[0];
  el.scrollTop = el.scrollHeight;
});

body {
  overflow: hidden;
  margin: 0;
  padding: 0;
}
div.a {
  height: 100vh;
  overflow: auto;
}
div.b {
  height: 1500px;
  position: relative;
}
div.c {
  position: absolute;
  bottom: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="a">
  <div class="b">
    <button id="btn1">Scroll body - doesn't work</button><br />
    <button id="btn2">Scroll element - will work</button>
    <div class="c">This is at bottom of page</div>
  </div>
</div>

注意 - jquery 的使用只是为了使示例更短。

【讨论】：