How to implement Move back to top in WordPress theme without Plugin


back-to-topBack to top is implemented on almost all types of websites that used to display long post or information to their readers and it is also not feasible to display all possible links side by side, so programmers used back to top link to move user at the top of their websites

Implement Back to top without jQuery Plugin

For this method we are going to use simple anchor and linking method, you are required to create an anchor in either your header.php file or any other file that start the <body> tag.

<a name=”top”>

is the method to create an anchor text and place this just below the <body> tag

Now open your footer.php file and just before your </body> tag add the following line of code

<a href=”#top”>Back to top</a>

Above method will add a simple back to top text in your wordpress theme, to give this little style you a little bit CSS is required

.style {color:#434343;text-decoration:none;border-bottom:1px dotted #e7e7e7;}
.style:hover {color:#cc0000;}

Now your final code in footer.php will looks like this

<a class=”style” href=”#top”>Back to top</a>

That’s it. It is one of the simplest method to add Back to top and works with all type of browser and does not slow down your web-page loading speed.

Implementing Back to top with jQuery Plugin

If you are not worried about your Google PageSpeed and want little bit more wow effect in this case then you should try this.

This method is totally based on jQuery so you are required to add jQuery in your WordPress theme. This is highly recommended to add jQuery in no conflict mode using

wp_enqueue_script('jquery');

This WordPress statement will basically load your jQuery from your WordPress installation in no conflict mode.

Now it time to open your footer.php file or any other wordpress file that has closing body tag </body>. You are requested to just paste the below code just before </body> tag

<a href="#" class="back-to-top">&#8593; </a>

Code had been placed now its time to add its functionality inside your WordPress theme. You are required to place below code inside your footer.php file before </body> tag.

<script type="text/javascript">
jQuery(window).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

But I do not recommend this crude method to my dear friends so the better option is functions.php file. Open your favorite text Editor and add following code inside your file.

if ( ! function_exists( 'bookreview_carousel_exists' )) :
function bookreview_carousel_exists() { ?>
<script type="text/javascript">
jQuery(window).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});
jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script><?php }
add_action( 'wp_footer', 'bookreview_carousel_exists' );
endif;

Above code checks whether a function bookreview_carousal_exists in our function database or not, if it does not exists in our database then define a new function and a hook add_action( ) invoke the same function whenever wp_footer executes, thus ensure that this functionality does not slow down our website loading speed.

Step:3 Add styling to your jQuery slider

Open your style.css file and add following code at the bottom of your file.

.back-to-top {
position: fixed;
bottom: 2.4em;
right: 12px;
text-decoration: none;
color: #cc0000;
background-color: rgba(235, 235, 235, 0.80);
font-size: 12px;
padding: 5px 15px;
font-size:24px;
font-weight:bold;
border:1px solid #e4e4e4;
display: none;
}
.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50);
text-decoration:none;
}

The above code will add a fancy back to top button at right bottom corner of your website and it will fadeout when you will scroll at top and reappear when your user scroll down.




2 Brilliant Comments - Join Discussion Now!

  1. Anchit Shethia says:

    Does this work on Genesis child themes?

    • rakesh says:

      AS per my knowledge this is working model on all the themes. If you have any customized theme that does not have footer.php or header.php file then just show me the files i will do this for you. Keep in touch Anchit and best of luck for your this project.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>