CODEWITHSUNDEEP
javascriptjqueryhtml
Luis Gallego
Luis Gallego

Reputation: 85

Scroll page to the bottom of a div with jQuery

I have some really large divs with code samples and I'd like to add a button so, when the user clicks on it, the page will scroll (with some ease) to the bottom of that 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>

Upvotes: 0

Views: 62

Answers (1)

alex
alex

Reputation: 490647

You can simply set scrollTop to scrollHeight.

elem.scrollTop = elem.scrollHeight;

If you have an element you want to scroll to, call scrollIntoView() on a reference to it.

Upvotes: 2

Related Questions