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:
- Creating a Javascript File
- Enqueuing the Script
- Adding CSS
- 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:
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!
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!
Leave a Reply