Most “back to top” buttons use JavaScript.
But they really don’t have to.
The browser already knows how to scroll. We just have to ask nicely.
All you need is:
- Give your page an
id="top"(usually on the<body>). - Add a link with
href="#top"that scrolls back to the top. - Use
position: fixedto pin it in the corner. - And
scroll-behavior: smoothon the html for smooth transitions
No listeners. No scroll events. No extra code.
This is simpler, faster, and works everywhere. Sometimes, native HTML and CSS are all you need.
Checkout the codepen: https://codepen.io/theosoti/pen/KwdzKGx
To learn more tips about CSS, make sure to join my newsletter below ❤️