Tuesday 15 September 2015
Smooth Scrolling Back To Top JQuery Widget For Blogger
Using
jquery plugins on website or blog are important part of designing and
making blogs more attractive. In blogger their thousand of widget
developed with the usage of jquery. For different automatic effect which
attract your eyes are almost based on jquery. Their are many images
zoom effects, drop down menus other on mouse hover effects are done with
help of jquery. In all these one of the famous used jquery widget is
back to top. Even you can make Back To widget just by using internal
page # anchor linking which will scroll back to top of the page
even you are using this in below pages menu. But this widget scroll back
too much fast but jquery plugin works in different it convert this
scrolling into slow process which make it attractive. Smooth scrolling
take few secs to scroll towards upward. The main benefit of this widget
is on infinite scrolling pages or on that pages which are too much
lengthy then to same some secs on users side this widget help them to
get back on top just at single click. Today i will help you add jquery
smooth scrolling widget within blogger if want to use this widget then
follow below given steps.Method To Add Smooth Scrolling Gadget in 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2vShmc8K9_ZqNc8CkzVOdi8MKwyHNSeL5CdUyXRFSu0272H9toNHNoZi_14_ouTQ-vxCdfOa9tGLo07mSbHvBkpdMLH-03dJGrR8iV8izVQ8Tf5sMGzkCAto5xNY2M46hgza9xG2GfTQ/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2vShmc8K9_ZqNc8CkzVOdi8MKwyHNSeL5CdUyXRFSu0272H9toNHNoZi_14_ouTQ-vxCdfOa9tGLo07mSbHvBkpdMLH-03dJGrR8iV8izVQ8Tf5sMGzkCAto5xNY2M46hgza9xG2GfTQ/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
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2vShmc8K9_ZqNc8CkzVOdi8MKwyHNSeL5CdUyXRFSu0272H9toNHNoZi_14_ouTQ-vxCdfOa9tGLo07mSbHvBkpdMLH-03dJGrR8iV8izVQ8Tf5sMGzkCAto5xNY2M46hgza9xG2GfTQ/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.
I hope like it in case if you don't like our given images then search at Google and then use that one.
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment