使用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()的元素。