ADD SMOOTH SCROLL TO TOP BUTTON WITH JQUERY TO BLOGGER / BLOGSPOT
WHAT IS DIFFERENCE BETWEEN PREVIOUS AND PRESENT PLUGINS?
In previous Plugin, the Scrolling Starts from bottom with a Certain speed and Maintains Same speed till to reach top of web page
But in 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.
Demo
Scroll this page to Bottom and See Demo at bottom right
HOW TO ADD SMOOTH SCROLL TO TOP WITH JQUERY ?
there are 2 Simple Steps
Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery 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/AVvXsEjfX95edHOMq8o8iSvCPY-iMbPUGRF4-Ocz4TFerSRLV7hYi_hln3uimEa1eIay2RhvqqgIUH3N81LOUf2Qz6a5vyrZ4Eq2K2Xo9ia3szdn7tHiD1s_Cc-RMWnaWBLO6YAjNIfDuIFr1Osl/) no-repeat left top;}
#w2btoTopHover {background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfX95edHOMq8o8iSvCPY-iMbPUGRF4-Ocz4TFerSRLV7hYi_hln3uimEa1eIay2RhvqqgIUH3N81LOUf2Qz6a5vyrZ4Eq2K2Xo9ia3szdn7tHiD1s_Cc-RMWnaWBLO6YAjNIfDuIFr1Osl/) 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>
You Are Successfully Done!
Leave your Comments and Responses about this Widget!
Many bloggers including some professional ones suggest to store Blogger images on services like
I wondered why don't we use back to bottom buttons just like back to top and this idea led me to jump at Photoshop again. The collection today consists of 20 high quality PNG static images that will allow your visitors to scroll up or scroll down thus making site navigation more easy and enjoying. Visitors are often too lazy to click Home or End button in the keyboard to scroll up or down the page and therefore these buttons will offer a much better flexibility to users to jump up or down as they wish and enjoy browsing through your blogs.
Free Icons, buttons or any blogger goody is something that is always welcomed by all. I am sharing some of my Freeware Icon collection that I have collected over the recent years for my designing projects. This web2.0 icon set contains everything you may need, from blog icons, forums, iphone, social media networks till RSS icons. All packed in one jumbo magic set! To get a free png copy of the this great collection, kindly submit your Email ID below in order to become a valuable MBT reader and avail tons of such resources for free.
Here is yet another PNG set for Feedback buttons which can be added in a similar method as we did for the previous 
