使用jQuery將頁面滾動到div的底部

Question

我有一些非常大的代碼示例div，我想添加一個按鈕，當用戶點擊它時，頁面將滾動（有一些緩解）到底部那div。

body { 
 
    background-color: #ecf0f1; 
 
} 
 
.story { 
 
    background-color: #fff; 
 
    border-radius: 5px; 
 
    height: 500px; 
 
    margin: 20px auto; 
 
    padding: 10px; 
 
    width: 70%; 
 
}

<div class="story"> 
 
    <button class="scrollToBottom">Scroll to bottom</button> 
 
</div> 
 
<div class="story"> 
 
    <button>Scroll to bottom</button> 
 
</div> 
 
<div class="story"> 
 
    <button>Scroll to bottom</button> 
 
</div> 
 
<div class="story"> 
 
    <button>Scroll to bottom</button> 
 
</div> 
 
<div class="story"> 
 
    <button>Scroll to bottom</button> 
 
</div> 
 
<div class="story"> 
 
    <button>Scroll to bottom</button> 
 
</div> 
 
<div class="story"> 
 
    <button class="scrollToBottom">Scroll to bottom</button> 
 
</div> 
 
<div class="story"> 
 
    <button>Scroll to bottom</button> 
 
</div> 
 
<div class="story"> 
 
    <button>Scroll to bottom</button> 
 
</div> 
 
<div class="story"> 
 
    <button>Scroll to bottom</button> 
 
</div> 
 
<div class="story"> 
 
    <button>Scroll to bottom</button> 
 
</div> 
 
<div class="story"> 
 
    <button>Scroll to bottom</button> 
 
</div> 
 
<div class="story"> 
 
    <button class="scrollToBottom">Scroll to bottom</button> 
 
</div> 
 
<div class="story"> 
 
    <button>Scroll to bottom</button> 
 
</div> 
 
<div class="story"> 
 
    <button>Scroll to bottom</button> 
 
</div> 
 
<div class="story"> 
 
    <button>Scroll to bottom</button> 
 
</div> 
 
<div class="story"> 
 
    <button>Scroll to bottom</button> 
 
</div> 
 
<div class="story"> 
 
    <button>Scroll to bottom</button> 
 
</div>

Answer 1

您可以簡單地設置scrollTop到scrollHeight。

elem.scrollTop = elem.scrollHeight; 

如果您想要滾動到，就對它的引用調用scrollIntoView()的元素。