Menu

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;
}

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.

This post is day 12 of my #100DaysToOffload challenge. If you want to get involved, you can get more info from https://100daystooffload.com.

Subscribe for more!

You will receive monthly emails with updates and previews of upcoming posts. To find out more, click here.

Please enter a valid email address.
That email address is already subscribed.
The security code entered was incorrect
Thanks for signing up!

«

»


Comments

Please read my commenting guidelines before posting a comment.

  1. I never knew this was possible without Javascript, thank you for sharing the trick. 🙂👌

Leave a Reply

Your email address will not be published. Required fields are marked *