Scroll/Back to top Blogger widget based on JQuery - Cyber Programmers - Learn Programming


Wednesday, May 20, 2015

Scroll/Back to top Blogger widget based on JQuery

Blogger users growing up every day. Blogger is a simple for use and easy to customize. Also, it's giving a free unlimited hosting. You can add a JS code to your blog to give effects to it. And in this post, I will give you a code of JQuery based scroll button widget. 

1) First of all go to blogger and after to Layout.
2) Now click on "Add a new Gadget" button.
3) And add this code:
<script src="" type="text/javascript"></script><script type="text/javascript">$(function(){$(window).scroll(function(){if($(this).scrollTop()!=0){$("#top").fadeIn()}else{$("#top").fadeOut()}});$("#top").click(function(){$("body,html").animate({scrollTop:0},800);return false})});</script>
<a href="" id="top" style="bottom: 1px; cursor: pointer; display: none; font: 12px arial; position: fixed; right: 0%;"><img src=" To Top.png" height="43px" width="43px" /></a>
Now to change the image of scroll widget, you need to replace the default image link with new image link: To Top.png
To change the height and width of image change the values of width="43px" height="43px"

Now save the widget and enjoy!