This post is more than three years old so may contain incorrect information, or opinions I no longer hold.
Adding A Scroll To Top Button Without JavaScript
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;
}
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.
Get in touch!
Receiving emails from my readers is my favourite thing, so if you have something to say, feel free to drop me an email or sign my guestbook.
Want more content?
Say no more, dear reader. Here's three random posts from this blog for you to peruse:
Comparing Static Site Hosts; Which Is The Best Host For A Static Site?
14 Jan 2022
Why Having A Full Post RSS Feed Is A Good Idea
04 Apr 2020
My First Wet Shave in 15 Years
29 Oct 2023
Subscribe via email
Want to be informed when I post new articles? Simply enter your email address below and you will get an email whenever new posts are published.
Alternatively, you can subscribe via RSS instead.
Enjoyed this post?
I put a lot of work into maintaining this site and I really enjoy interacting with my readers.
My fuel of choice is coffee, so if you did enjoy this post, or found it in any way useful, I'd appreciate more fuel to keep me going. ❤️
Buy me a coffee