How to Scroll to the Bottom of a Div with JavaScript?

Sometimes, we want to add a feature to let users scroll to the bottom of a div.

In this article, we’ll look at how to scroll to the bottom of a div with JavaScript.

Set scrollTop to scrollHeight

One way to scroll to the bottom of a div with JavaScript is to set the scrollTop property of the div object to the scrollHeight property of the same object.

For instance, we can write the following HTML:

<button>
  scroll to bottom
</button>
<div style='height: 300px; overflow-y: scroll'>
</div>

Then we can write the following JavaScript code:

const div = document.querySelector('div')
const button = document.querySelector('button')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  div.appendChild(p)
}
button.addEventListener('click', () => {
  div.scrollTop = div.scrollHeight;
})

We set the height of the div to 300px and overflow-y to scroll to make the div scrollable.

Then in the JavaScript code, we get the div and the button.

Before we add the scrolling code, we add a for loop to create a p element and call appendChild to append the p elements to the div.

Next, we call addEventListener to add a click event listener to the button.

Then we set scrollTop to scrollHeight as we did in the callback to scroll to the bottom of the div.

scrollHeight is the height of an element’s content, including content that’s not visible on the screen due to overflow.

Set scrollTop to scrollHeight — clientHeight

clientHeight is CSS height + CSS padding + height of the horizontal scrollbar if prssent.

We can subtract that from scrollHeight and scroll to the bottom.

So we can write:

const div = document.querySelector('div')
const button = document.querySelector('button')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  div.appendChild(p)
}
button.addEventListener('click', () => {
  div.scrollTop = div.scrollHeight - div.clientHeight;
})

and keep the HTML the same.

We still scroll down to the content height by setting scrollTop to the height of the content.

We just omit the scrollbar height.

The scrollIntoView Method

Another way to scroll to the bottom of a div is to select the element at the bottom of the div.

Then we can call scrollIntoView on it to scroll to the bottom.

For instance, we can write:

const div = document.querySelector('div')
const button = document.querySelector('button')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  p.id = `el-${i}`
  div.appendChild(p)
}
button.addEventListener('click', () => {
  const bottomEl = document.querySelector('#el-100')
  bottomEl.scrollIntoView({
    behavior: 'smooth',
    block: 'end'
  });
})

to call scrollIntoView on the bottomEl , which is the element with ID el-100 .

This element is at the bottom of the div, so we’ll scroll to the bottom.

behavior set the scroll behavior.

'smooth' lets us do smooth scrolling.

block is set to 'end' to scroll to the end of the element.

Conclusion

There’re several ways we can use to scroll to the bottom of a div with JavaScript.