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
- 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.png' width="20px"height="30px"/></a>
<!--Safe Tricks back to top widget End-->
<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.png' width="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