Kev's Avatar Kev Quirk

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 ‘href’ to the opening ‘body’ tag in your site’s HTML:

<body href="top">

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 ‘href’ 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.

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.


📰 Cool people get newsletters!

Do you want all your friends to look up to you and think “I wanna be like them!” If so, you need my newsletter! To find out more click here.

Warning: Reading my newsletter will not make you any cooler and is likely to significantly reduce your intelligence. May contain nuts 🥜.


💬 Looking for comments?

I don't have comments on this site as they're difficult to manage and take up too much time. I'd rather concentrate on producing content than managing comments.

Instead of leaving a comment, you could 📝 sign my guestbook or ✉️ contact me instead.