Implementing Scroll To Top Button

This function was given to me by Malinka, so all the credit and appreciation should be directed towards her…

There are numerous plugins that add this functionality to websites, but if you wanted to have the “scroll to top” feature without a plugin follow the directions below:

1 – Place this Javascript code at the bottom of the script/script.js file:

/* Back to top script */
jQuery(document).ready(function () {
var offset = 200;
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;
});
});
/* Back to top script end */

2 – Place the following in the style.css file:

/* Back to top css */
.back-to-top {
width:38px;
height:38px;
background-image: url(‘images/top.png’);
bottom: 50px;
display: none;
padding: 0;
position: fixed;
right: 2em;
text-decoration: none;
z-index: 99;
}

3 – Place this image in your themes images folder: (right mouse click and download the image file)

4 – An finally place the following html code in a text widget in the footer widget area, or inside the footer.php file directly.

<div class=”totopshow”>
<a class=”back-to-top” href=”#” style=”display: block;”></a>
</div>

Once again, thanks Malinka, keep them coming please!