0

                            Smooth Scrolling Back To Top JQuery Widget For Blogger


  • Open Your Blogger Blog and Then open Layout of your blog.
  • Then click on Add a Gadget.
  • New Window will appear and find the option of Edit HTML/JavaScript and open it
smooth scroll back to top widget
  • Now Empty box will appear and paste below given codes in it.
<!--Safe Tricks 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:0%; cursor:pointer;font:12px arial;'><img src='http://4.bp.blogspot.com/-6NJTD1oE2I8/UQLk0xLIW-I/AAAAAAAAAXY/bNC6zvfehKY/s1600/Back-to-top.pngwidth="20px"height="30px"/></a>
<!--Safe Tricks back to top widget End-->

  • In case if you want to change your image of arrow which we use in scrolling then replace
 http://4.bp.blogspot.com/-6NJTD1oE2I8/UQLk0xLIW-I/AAAAAAAAAXY/bNC6zvfehKY/s1600/Back-to-top.png

  • To change the height width of your image simply change the values of width="20px"height="30px"
  • After replacing save it and open your blog watch working.

Post a Comment

 
Top