Plain HTML Scroll to Top


Revisiting the scroll to top in HTML

15 Jun, 2020 · 2 min read

The other day, I posted a JavaScript Scroll to Top function that is very cool. As mentioned, there are so many ways of doing a particular action.

On this specific post, I got a lot of comments; you can do the same in just plain HTML. This is true! And I thought it would be great to write an article about this.

HTML Structure

<div id="top"></div>
<a href="#top" class="scroll scroll-top">☝️</a>
<a href="#bottom" class="scroll scroll-bottom">👇</a>
<div class="content">All the content...</div>
<div id="bottom"></div>

So the things to mark are the divs with specific IDs. We just made two empty divs, but we can even use existing divs!

Then we create two links with a href to #top (id=“top”) and #bottom (id=“bottom”)

This will automatically scroll to the specific ID once clicked on!

To make it smooth, we can add the following CSS.

html {
  scroll-behavior: smooth;

It can be as easy as this, with many ways leading to the same solution. It all depends on what you prefer or need.

See it in action on this Codepen.

See the Pen Plain HTML Scroll to Top by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Submit button outside the form

4 Dec, 2022 · 1 min read

Submit button outside the form

Trying out native dialog modals

8 Aug, 2022 · 3 min read

Trying out native dialog modals

Join 2100 devs and subscribe to my newsletter