I have already share with you guys tutorial on Adding Back To Top Button On Your Blog and also shared 16 Awesome Back To Top Buttons. In this tutorial i will share with you guys awesome jQuery smooth scrolling back to top button. This simple widget will enable your users to easily go back to top of your page with ease of a click. So lets add this simple and useful plugin to your blog together.
Adding jQuery Code (Optional)
1. If you have not already placed jQuery in your template then follow this steps or jump directly to next section of this tutorial.
2. Go to Template > Edit Html
3. Then Search for <head> by pressing CTRL + F
4. Paste below code just after the <head> Tag
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
How To Add jQuery Back To Top Button
1. Go to Blogger > Layout
2. Now click on Add Gadget and select Html/Javascript
3. Then Paste below code into it.
<style>
.mbw-back-to-top {
position: fixed;
bottom: 2em;
right: 10px;
text-decoration: none;
padding: 1em;
display: none;
cursor:pointer;
}
</style>
<img class="mbw-back-to-top" src="IMAGE URL" />
<script type="text/javascript">
/*****mybloggersworld.com***/
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.mbw-back-to-top').fadeIn(duration);
} else { //www.mybloggersworld.com
jQuery('.mbw-back-to-top').fadeOut(duration);
}
});
jQuery('.mbw-back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>
4. Now replace IMAGE URL with any image from below list or any of your choice.
No comments:
Post a Comment