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!
4 comments on “Implementing Scroll To Top Button”
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
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…
Nick you absolutely true, thanks
Hi Nick, sorry…
so far I was using only css, to add this option, with hover effect.
Thanks to you and Malinka