How to Scroll Page to Bottom in JavaScript (4 Easy Methods + Best Practices)

Scrolling a web page to the bottom with JavaScript is a common task, whether you’re building a chat app, implementing infinite scroll, or just want to test page behavior. In this guide, we’ll cover multiple methods to scroll to the bottom of a page, along with code examples, browser support, and best practices for 2025.

1. Using the scrollTop property:

The simplest way is to use the built-in scrollTo method:

window.scrollTo(0, document.body.scrollHeight);

• The first argument 0 = x-axis.
• The second argument = y-axis (page height).

This instantly jumps the viewport to the bottom.

2. Using scrollTo with Smooth Scrolling

Modern browsers support the { behavior: "smooth" } option:

window.scrollTo({
  top: document.body.scrollHeight,
  behavior: "smooth"
});

This provides a smooth scrolling animation, improving user experience.

3. Using scrollBy() for Relative Movement

If you want to scroll relative to current position:

window.scrollBy(0, window.innerHeight);

This scrolls down by one viewport height. To loop until bottom:

const interval = setInterval(() => {
  window.scrollBy(0, 100);
  if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
    clearInterval(interval);
  }
}, 50);

5. Scrolling an Element into View

If you have a specific element at the bottom (like #footer):

document.getElementById("footer").scrollIntoView({ 
  behavior: "smooth" 
});

This ensures the footer (or any target element) is visible.

Common Pitfalls

• Dynamic content loading: if content loads after the scroll, you may need to wait until the page is fully rendered before scrolling.
• Mobile vs Desktop: viewport height varies; always test.
• Accessibility: smooth scrolling is better than sudden jumps, but give users control.

Best Practices (2025)

• Use smooth scrolling for better UX.
• If auto-scrolling (e.g., chat apps), add a toggle so users can disable it.
• For infinite scroll apps, detect when the user reaches the bottom instead of forcing scroll.
• Always test across devices.

FAQ

Q: How do I detect if a user has scrolled to the bottom?

if (window.innerHeight + window.scrollY >= document.body.offsetHeight) { console.log("Reached bottom!"); }

Q: Can I auto-scroll as new messages arrive in a chat app?
Yes, call scrollIntoView() on the latest message element when you append it.