q
Today I am giving a tutorial about How to add smooth scrolling go to top button with jquery. This plugin the Scrolling Starts from bottom with a Certain speed and it Ends with Gradually Decreases the speed. this effect is looks more attractive.
Installing the plugin -
Here are two simple steps to install this widget -
Step 1: Adding Jquery JavaScript Plugin
- Go to Blogger Dashboard > Design tab > Edit Html
- Search for
</head>tag - Add below line of code Before
</head>tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
Step 2: Adding Scroll to Top Script
- Go to Blogger Dashboard > Design tab > Edit Html
- Search for
</head>tag - Add below section of code Before
</head>tag and Save your Template.
<style type="text/css">
#w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQZdf88ICFKrqn9kCcAzvF4ZCwv-75LrM5cOIZdoydZWGVw6FWCbUiW7a9yJa1142GfzHkl3SGbDpvlDc6vR6EraKauokPVYbc8RQytHIbXfrEfTmjhZYepCHjjC97_0hHzVLF_I5RfpI8/) no-repeat left top;}
#w2btoTopHover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQZdf88ICFKrqn9kCcAzvF4ZCwv-75LrM5cOIZdoydZWGVw6FWCbUiW7a9yJa1142GfzHkl3SGbDpvlDc6vR6EraKauokPVYbc8RQytHIbXfrEfTmjhZYepCHjjC97_0hHzVLF_I5RfpI8/) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
#w2btoTop:active, #w2btoTop:focus {outline:none;}
</style>
<script src="http://bloggerblogwidgets.googlecode.com/files/w2b_jquery.ui.totop.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){ $().UItoTop({ easingType: 'easeOutCirc' }); });
</script>Save your template and reload your blog page to see changes.
Leave your comments about this widget....
Thanks to Way2Blogging.org Author - Harish...
Post a Comment