scrollTo()函数什么都不做

时间:2017-09-02 21:09:44

标签: javascript google-chrome scrollbar

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

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

它所做的只是在控制台中记录“undefined”。输入

document.body.scrollHeight

返回一个整数736.除此之外,我输入函数的参数并不重要,没有任何反应。更重要的是,它只发生在一个网站上。可能重要的(不确定)是网站隐藏了它的垂直滚动条,甚至认为它有很长的内容列表。

4 个答案:

答案 0 :(得分:0)

问题可能是您在网站上的实际滚动不是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>
&#13;
&#13;
&#13;

  

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

答案 1 :(得分:0)

在页面中放置一些内容,例如,身体高度= 1500px,然后尝试执行相同的代码。

答案 2 :(得分:0)

解决。这是必须要做的:

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

无论出于何种原因,将显示更改为“阻止”都可以使用给定的代码进行滚动:

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

答案 3 :(得分:0)

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