This post is more than three years old so may contain incorrect information, or opinions I no longer hold.
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.
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:
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.
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.
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.
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.
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:
Moving Away from Google - FINALLY!
09 Feb 2015
Is A Password Book A Bad Idea?
14 May 2018
Why HTTPS Is Important
22 Mar 2018
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