javascript - 使用 jQuery 将页面滚动到 div 的底部

标签 javascript jquery html

我有一些非常大的 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>

最佳答案

您只需将 scrollTop 设置为 scrollHeight 即可。

elem.scrollTop = elem.scrollHeight;

如果您想要滚动到某个元素,请对其引用调用 scrollIntoView()

关于javascript - 使用 jQuery 将页面滚动到 div 的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27240808/

相关文章:

javascript - 需要将背景颜色应用于每个图例文本 Highcharts

php - 自动 <p> 正则表达式 - 需要修复

javascript - 如何将 eventListener 添加到 JavaScript 中的对象,该对象将在操作对象时触发?

javascript - 使用 Javascript 从日历中选择多个日期

jquery - 使用 jquery 刷新 HTML 页面的一部分

javascript - Ember 组件功能

javascript - 如何在页面加载时忽略 window.onpopstate?

javascript - Git 远程仓库没有显示在 <ul> 中

javascript - 如何使用 Immutability Helpers 推送数组中的第一个元素

javascript - 从一个下拉列表中填写一些输入