How to smooth scroll to the bottom of a page with JavaScript & CSS

Learn how to smoothly scroll the user to the bottom of a long web page, with JavaScript and a tiny bit of CSS.

If you want to give your users the ability to smoothly scroll to the bottom of a page you can use a CSS property called scroll-behavior and a JavaScript method called scrollIntoView().

You’ll need the following:

• a long web page with enough content to activate the y-axis scroll bar on the right of your browser
• an anchor element at the top of the page with an id
• any element with an id at the bottom of the page
• the scroll-behavior CSS property
• the scrollIntoView() JavaScript property

Let’s learn by example!

HTML layout example

You can use following HTML markup example to learn (feel free to replace the <p>....</p> dummy elements with real content):

<main>
  <p><a id="scroll-to-bottom">Scroll to bottom</a></p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p>....</p>
  <p id="page-bottom">You have reached the bottom of this page!!</p>
</main>

Notice, we have one anchor element <a> at the top with an id of scroll-to-bottom, and one element at the bottom with an id of page-bottom.

CSS

To activate smooth scrolling, add the following to your CSS stylesheet:

html {
  scroll-behavior: smooth;
}

/* Layout */
main {
  max-width: 700px;
  margin: 3rem auto;
  padding: 0 1rem;
}

#scroll-to-bottom {
  font-weight: bold;
  color: green;
}

Note: the scroll magic comes from scroll-behavior: smooth;, the rest of the CSS styling above is purely cosmetic.

JavaScript

To smoothly scroll the user from the top to the bottom of the page when users click on Scroll to Bottom add the following JavaScript code:

let scrollToBottom = document.querySelector("#scroll-to-bottom")
let pageBottom = document.querySelector("#page-bottom")

scrollToBottom.addEventListener("click", function() {
  pageBottom.scrollIntoView()
})

How the JavaScript code works

• First we declare two variables to reference scroll-to-bottom and page-bottom respectively.
• Then we attach an event listener to the scrollToBottom variable and ask it to specifically listen to click events.
• Inside the function() { .. } we attach the scrollIntoView() method to the page bottom element pageBottom.

Now whenever someone clicks on scroll to bottom the function executes the scrollIntoView method and scrolls the user to the bottom where the page-bottom id is located.

Note: if you remove scroll-behavior: smooth; the scroll will still take place technically, but it’ll be abrupt.

You can also make smooth scrolling with pure vanilla JavaScript (no CSS properties) but that requires a lot more code than what you see in this example.

Check out all the demo code.

How is scroll to bottom useful in real life?

One use case that comes to mind is to allow visitors to quickly scroll to a summary of a longer piece of content that they may not have time to read right now.

Browser compatibility

The scroll-behavior CSS property is not compatible with Internet Explorer or Safari. For those browsers, you’ll need a pure JavaScript solution.