• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

How To Add A “Back To Top” Icon On Your WordPress Site

Bhagwad Park

Published on: October 3, 2018

Categories: WordPress 0

These days, articles on the web are getting longer and longer. Many SEO experts recommend massive content pages with thousands of words to rank on Google. It’s a different matter that more often than not, I find such articles fatiguing, but that’s a different topic! The point is that you probably have quite a bit of long-form content on your site.

The problem occurs when it’s not easy to navigate the page due to its length. Unlike a book, where you can skip immediately to the middle or even the end, webpages are linear – by default, you can’t suddenly go to the middle, the bottom, or the top. There are keyboard shortcuts of course, but a lot of people don’t use them.

One way to get around this is by having links to various parts of your page. A table of contents is a great idea to help with navigation. But when users reach the end of your article, they often want to go back right to the top. The top of the page contains the navigation links, the contact widgets, and even the site icon which takes you to the home page. As such, I recommend that you add a “Back to Top” icon to your site so that users can immediately get where they’re going.

No “Plug n Play” Solutions – Till Now!

I don’t like to install more plugins than necessary. And when trying to implement this, I wanted a “plug and play” solution purely via code. When writing this tutorial, I hardly found any solutions that fit the bill.

They usually required the following steps:

  1. Creating a Javascript File
  2. Enqueuing the Script
  3. Adding CSS
  4. Adding images

Needless to say, this is too many moving parts for me. I’m a lazy person and like solutions that don’t need so many steps. So I took bits and pieces of code from various parts of the site and created a single block of code that will work on any site!

Adding ONE Block of Code to your Site

Open up your functions.php file, or custom plugin where you store your PHP code and paste the following:

function add_code_for_top() {
    $javascript = <<<'EOT'
<script type="text/javascript">
jQuery(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() < 200) {
            $('#totop') .fadeOut();
        } else {
            $('#totop') .fadeIn();
        }
    });
    $('#totop').on('click', function(){
        $('html, body').animate({scrollTop:0}, 'fast');
        return false;
        });
});
</script>
<style type="text/css">
#totop { 
height: 20px; 
width: 20px; 
position:fixed;
bottom:50px;
right:100px;
text-indent:-9999px;
-webkit-transition-duration: 0.4s; 
-moz-transition-duration: 0.4s; transition-duration: 0.4s;
border: solid black;
border-width: 0 5px 5px 0;
display: inline-block;
padding: 3px;
-webkit-transform: rotate(-135deg);
}
</style>
<a href="#top" id="totop" title="Back to top"></a>
EOT;
	echo $javascript;
}
add_action( 'wp_footer', 'add_code_for_top', 100 );

Save your changes and you’re done! Now when you open your site, you’ll see the following at the bottom:

Button to Go To the Top

 

Clicking this arrow will take you directly to the top of the page. It’s a smooth and fast animation that should work on all browsers.

Salient Features of this Code

This code works completely “out of the box”. No need to add your own images or create new files. I’ve created the “arrow” shape entirely out of CSS, so all the hard work is done by the local browser. I’ve borrowed some Javascript from wpbeginner’s tutorial, so a big thank you to them! I’ve removed the animations though…

So far, this is the easiest way I’ve found to add the “Back to Top” icon for WordPress. You probably already have code in functions.php, so inserting this won’t be an issue. I hope you found it useful!

Bhagwad Park Profile Picture
Bhagwad Park

I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!

Reader Interactions

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • Website Performance
  • Web Hosting
  • Resellers
  • Website Development
  • Website Security
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA