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