Subscribe

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 📖

Moving from GIF to video format

27 Jun, 2021 · 3 min read

Moving from GIF to video format

Common HTML Element Types

3 May, 2021 · 4 min read

Common HTML Element Types

Join 1513 devs and subscribe to my newsletter