我想使用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（）函數什麼都不做

回答

已解決。這是必須做的：

相關問題