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.
4. Now replace IMAGE URL with any image from below list or any of your choice.
<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>
0 Response to "Add Smooth Scrolling Back To Top Button On Your Blog"
Post a Comment