Adding A Scroll To Top Button Without JavaScript
06 May 2020
I was using a plugin for my Scroll To Top button, but I’ve now replaced that with a simple HTML/CSS solution that doesn’t use any JavaScript.
I recently wrote about the plugins that I use on this site. In that post I mentioned the WPFront Scroll Top plugin that I was using for _the _Scroll To Top button on this site. I decided that was pretty lazy and relatively simple to fix, so the plugin had to go.
I wanted a simple solution that didn’t use any JavaScript, as I’m trying to reduce the amount of JavaScript used on this site. I’ve managed to come up with a simple solution that doesn’t need any JavaScript.
Adding HTML/CSS Scroll To Top
Implementing this solution is extremely easy. The first thing you need to do is add a blank hyperlink right below the <body> tag in your site’s HTML:
<a name="top"></a>If you’re using WordPress, like I am, then you will need to edit your theme to do this. If you’re going to edit your theme, I’d recommend creating a child theme so that your changes aren’t overwritten when your theme is updated.
In WordPress, the opening <body> tag is usually found in the header.php file. Adding the blank link here will ensure that it’s automatically added to all of your pages and posts.
The Footer
Once you have done that, all that is needed now is to open up the footer.php file of your WordPress theme and add the following link to it:
<a href="#top">Back To Top</a>This will add a link in your footer that references the blank link right at the top of your page. So when someone clicks on that link, they will be taken back to the top of the page.
Smooth Scrolling
That’s it, you don’t need to do anything else. You now have a working scroll to top button that doesn’t require any JavaScript. However, you may notice that when you click on the Back To Top link, the page just jumps straight to the top.
While this is working, it’s pretty jarring when the page just jumps from one end to the other. A better way of doing this, is to implement smooth-scrolling. This will simulate the user scrolling back to the top of the page, instead of just jumping straight there.
Smooth scrolling is also super simple to implement, and doesn’t require any JavaScript. Open up your CSS stylesheet and add the following:
html {
scroll-behavior: smooth;
} Note: not all browsers support scroll-behavior, but for those that do, it’s a better experience.
That’s literally it! This one piece of styling is enough to enable a nice smooth scrolling effect back to the top of the page, instead of that jarring jump.
Conclusion
I don’t know why I didn’t do this sooner, as it only took me 10 minutes to do. I just hadn’t thought of removing that plugin until I actually took the time to go through which plugins I has installed.
From now on I’m going to review the plugins regularly. I can then decide if any need to be removed, or replaced by adding similar functionality within my theme.