Search Box by All Blogger Tricks

Saturday 7 September 2013

Smooth Scroll to Top Button with Jquery for Blogger


Freelance Jobs
Add Smooth Scroll to Top Button with Jquery to Blogger / Blogspot
How to Add Smooth Scroll to Top button with Jquery plugin, I already given a Scroll to Top widget with Jquery and CSS. here i am giving another type of Smooth scroll to Top Widget with Jquery.

What is Difference Between Previous and Present Plugins?

In previous Plugin, the Scrolling Starts from bottom with a Certain speed and Maintains Same speed till to reach top of web page
But in this plugin the Scrolling Starts from bottom with a Certain speed and it Ends with Gradually Decreases the speed. this effect is looks more attractive.
Demo
Scroll this page to Bottom and See Demo at bottom right

How to Add Smooth Scroll to Top with Jquery ?

there are 2 Simple Steps
Step 1: Adding Jquery JavaScript Plugin(Ignore this step if your blog have already a Jquery Plugin)
  1. Go to Blogger Dashboard < Design tab > Edit Html
  2. Search for </head> tag
  3. Add below line of code Before </head> tag
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
Step 2: Adding Scroll to Top Script
  1. Go to Blogger Dashboard < Design tab > Edit Html
  2. Search for </head> tag
  3. Add below section of code Before </head> tag and Save your Template.
    <style type="text/css">
    #w2btoTop {display:none;text-decoration:none;position:fixed;bottom:10px;right:10px;overflow:hidden;width:51px;height:51px;border:none;text-indent:-999px;background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left top;}
    #w2btoTopHover {background:url(http://2.bp.blogspot.com/-oVa1ImctF7c/Tdouv3K7NyI/AAAAAAAAA38/xT4bu8uKM3M/way2blogging.org.ui.totop.png) no-repeat left -51px;width:51px;height:51px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
    #w2btoTop:active, #w2btoTop:focus {outline:none;}
    </style>
    <script src="http://widgets.way2blogging.org/blogger-widgets/w2b-jquery.ui.totop.js" type="text/javascript"></script>
    <script type="text/javascript">
    /*<![CDATA[*/
    ;(function($){$().UItoTop({easingType:'easeOutCirc'});})(jQuery); 
    /*]]>*/
    </script>
You Are Successfully Done!

Need more Customisations ? Comment your combinations
Below and We will add that in this post as soon as Possible


0 comments

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
Support: Contact Us | Feedback & Support | About Us
Links: Developer | Request/Publish/Remove Widget | Widgets by Widgets Bay
Donate Us via: PayPal Powered by: Blogger
Published by: Widgets Bay | Privacy Policy | Terms of Service
Copyright © 2013Widgets Bay - All Rights Reserved