Premium WordPress Themes and Support

 

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)

 

top

 

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!

 

4 comments on “Implementing Scroll To Top Button

Avatar image
su on February 19, 2016 3:10 pm

Thank Nick, i use a easy way from http://www.scrolltotop.com/
i put script on html when export theme
here screen shoot https://drive.google.com/file/d/0B3EGs3jRkUU_RWFaaGtjX190RFk/view?usp=sharing

Avatar image
Nick on February 19, 2016 4:04 pm

That’s very good su, but you are loading the image and the javascript from a server that is not yours.

What if their server goes down? I also wonder if their javascript, can cause security issues… or have some sort of spamming links underneath, that can cause all sorts of SEO issues for you. I don’t know, I’m just speculating…

Avatar image
su on February 20, 2016 6:09 am

Nick you absolutely true, thanks

Avatar image
Marco on February 27, 2016 8:01 am

Hi Nick, sorry…

so far I was using only css, to add this option, with hover effect.

Thanks to you and Malinka

Leave a Reply