Add Smooth Scrolling Back To Top Widget For Blogger Using Jquery

JQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Jquery plugins makes website or blog more beautiful and attractive. There are many widgets are made by using JQuery, it is so nice by looks and it's effects are also very nice. Using JQuery plugins you can attract visitors in your blog. Today I am telling you  How to add add smooth scrolling back to top widget for blogger using JQuery. Think it is a very boring task for visitors to scroll back from bottom of your blog to the top. Then if you use a widged for your visitors to go back to the top by just a single mouse click, then it is very helpful for the visitors. Now I am telling you how to add this, just follow the bellow steps. If you want to see how it works then just see my website.

How to add add smooth scrolling back to top widget:

Step 1: First login to your blogger account, then go to the Layout of your blog.

Step 2: Now click on Add a Gadget and choose  Edit HTML/JavaScript.

Step 3: Now copy the bellow code and paste it into the box.

<!-- back to top widget Start-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script><script type='text/javascript'>$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#ST-top").fadeIn()}else{$("#ST-top").fadeOut()}});$("#ST-top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script>
<a id='ST-top' style='display: none; position: fixed; bottom: 1px; right:2%; cursor:pointer;font:12px arial;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirAemy0kJ0Om314m9C8ePFDYnUjUCml62ctDVki9dOslw_DvYvOJQfjbvOIPWVXFW-HaMJQR4QqJipy_998ApG0uf9qevnc8jsronrs3ggvbqKBj2YOcBXnGZI05Me4HvcTXIdCV1F_sY/h120/top.png' width="30px" height="30px"/></a>
<!-- back to top widget End-->

Step 4: Now click on the Save button, and you have done it. Now check your blog and see how this widget works.

Note: if you want to change the icon of the arrow key, then you just replace the Red coloured link with your image link. You also can change the Hight and Width of the image by changing the hight and width part of the code.

I think this tick will help you the most. If you will face any masalah during activation of this protection then feel free to ask me. Now It's your turn to share this post with your friends and write your reviews in comment box. Feel free to follow us by Email to get our updates and upcoming amazing tutorials direct to your mail id...