Add
Smooth Scrolling Back To Top Button On Your Blog
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.
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://adminwidget.blogspot.in/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>
Now replace
IMAGE URL with any image from below list or any
of your choice.
0 comments:
Post a Comment