How can I use JavaScript to scroll to the bottom of the page automatically?

General Discussions
, ,
1

I have a list of questions, and when I click on the first one, I want it to automatically scroll to a specific element at the bottom of the page. What’s the best way to implement this behavior using JavaScript scroll to bottom functionality?

2

I’ve worked quite a bit with page scrolling, and one super reliable method for javascript scroll to bottom is using window.scrollTo combined with document.body.scrollHeight. It’s simple and does the job.

function scrollToBottom() {
    window.scrollTo(0, document.body.scrollHeight);
}

document.getElementById('question1').addEventListener('click', scrollToBottom);

Basically, when the user clicks the element with ID question1, the page instantly jumps to the bottom. Why it works: scrollHeight gives the total height of the content, so this scrolls you all the way down — no matter how long the page is.

3

Yep, @tim-khorev’s method is solid! I’ve done a lot of UI work, and I’d add that if you want a slightly more targeted approach for javascript scroll to bottom, you might want to scroll to a specific element instead of just blasting to the very end.

You can use scrollIntoView like this:

function scrollToElement() {
    const target = document.getElementById('bottomElement');
    target.scrollIntoView({ behavior: 'smooth', block: 'end' });
}

document.getElementById('question1').addEventListener('click', scrollToElement);

This way, you guide users to an actual section or message at the bottom, smoothly. Why it’s better sometimes: If your bottom has dynamic sections (like “Load More” buttons or footers), this makes the javascript scroll to bottom feel more natural and focused.

4

Great points from both of you!

Coming from building a few apps where timing really mattered, I’d also say: sometimes you need a tiny delay before scrolling, especially if the content is dynamic. That’s where setTimeout shines in a javascript scroll to bottom.

Here’s what I usually do:

function scrollToBottom() {
    setTimeout(() => {
        window.scrollTo({
            top: document.body.scrollHeight,
            behavior: 'smooth'
        });
    }, 100); // adjust delay as needed
}

document.getElementById('question1').addEventListener('click', scrollToBottom);

The setTimeout gives your page just enough breathing room to load any last bits (like images or AJAX content) before the scroll happens. Why this matters: When the page is still rendering or fetching stuff, an immediate javascript scroll to bottom might not land correctly — the delay ensures it does.