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
