我想使用vanilla JS滚动到页面的底部，但是我遇到了一个问题。下面的代码应该滚动到页面底部：scrollTo（）函数什么都不做

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

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

document.body.scrollHeight

返回一个整数736.除此之外，无论我输入到函数的参数中什么都不会发生。还有，它只发生在一个网站上。什么可能重要（不确定）是网站隐藏其垂直滚动条，甚至认为它有一个非常长的内容列表。

来源

2017-09-02 Thomas Johanson

问题可能是您在网站上的实际滚动不是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的使用只是为了让这个例子更短。

来源

2017-09-02 21:20:39 Dekel

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

来源

2017-09-02 21:23:14 JSingh

已解决。这是必须做的：

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

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

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

来源

2017-09-02 21:23:50

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

来源

2017-09-02 21:27:19

scrollTo（）函数什么都不做

回答

已解决。这是必须做的：

相关问题