JavaScript: Scroll to Bottom of div

John on March 16, 2021

To scroll to the bottom of a div, set the JavaScript scrollTop property of the element to the value of its scrollHeight property.

Let's try this out with a basic example that will scroll to the bottom of a div on page load.

<div id="box">
  <div class="content">
    Some text.
  </div>
</div>

#box {
  height: 200px;
  width: 300px;
  overflow: scroll;
  width: 300px;
}

.content {
  width: 100%;
  margin-top: 100px;
  height: 400px;
}

var element = document.getElementById('box');

element.scrollTop = element.scrollHeight;

Scroll to the Bottom of an Element on Button Click

Here is another example of scrolling to the bottom of a div, this time on a button click event.

<div id="box">
  <div class="content">
    Some text.
  </div>
</div>

<button id="button">Scroll to Bottom</button>

#box {
  height: 200px;
  width: 300px;
  overflow: scroll;
  width: 300px;
}

.content {
  width: 100%;
  margin-top: 100px;
  height: 400px;
}

document.getElementById('button').addEventListener('click', function(){

  var element = document.getElementById('box');

  element.scrollTop = element.scrollHeight;
});

The jQuery scrollTop Method

In jQuery, you can set the value of the scrollTop property to the scrollHeight in one line like this:

$('#box').scrollTop($('#box')[0].scrollHeight);

Here is another example, using a jQuery on click event:

$('#button').on('click', function() {
  $('#box').scrollTop($('#box')[0].scrollHeight);
});

Smooth Scroll to Bottom of div with jQuery

Here is an example of smooth scrolling to the bottom of a div on click using the jQuery animate() function.

$('#button').on('click', function() {

  var div = $('#box');

  div.animate({
    scrollTop: div[0].scrollHeight
  }, 1000);
});

The animation in the example above lasts for one second, which can be modified by changing the value of the second argument in the jQuery animate() function.