Plain HTML Scroll to Top

— 3 minute read

The other day I made a post about a JavaScript Scroll to Top function, which is very cool. As mentioned, there are so many ways of doing a certain 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 thinks to mark are the divs with specific id's, in this case 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, many ways leading to the same solution it all depends on what you prefer or needs.

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