You are Here → Home » Blogger Jquery » Add Smooth Scroll to Top Button with Jquery to Blogger / Blogspot

Add Smooth Scroll to Top Button with Jquery to Blogger / Blogspot

by in Blogger Jquery, Blogger Widgets

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!

Leave your Comments and Responses about this Widget!


Comments

  9. says

    hi Harish..
    There is a wrong in my page after i add this code..normally i should see it after i scroll down but it works to revers..first i can see it after i scroll down it disappears..
    and one more mistake: it doesnt look like this..

    page:onlinebjk.blogspot.com
    mail:mustafa.becanim@gmail.com

  11. says

    Find the correct version of this article here

    http://www.spiceupyourblog.com/2011/07/jquery-scroll-to-top-button-smooth.html

  13. Rolf says

    Thank you, how do I do it if I want to replace the button with one that I have made myself?

  15. wirasetiawan29 says

    How about this ..?
    After inserting the html code into my blog and failed
    Its error message :
    //Edit the contents of your template. Learn more
    We were unable to save your template

    Please correct the error below and submit your template again.
    More than one widget was found with id: HTML5. Widget IDs should be unique.//

    • says

      That means you already have a HTML widget with the same ID(HTML5)
      So try to add it in another New HTML/javascript widget

  27. Satinder says

    Other than home page these show at bottom and worked like ‘smooth top scroll’, why it is like this and how I can over come this problem…?

  29. says

    Hello Harish,
    Nice script, but you’ve have a bug there while calling the UItoTop,
    it should be

    $(function(){$().UItoTop({easingType:’easeOutCirc’});})(jQuery);

    • says

      I am using another shorthand method. both works fine. but the above given code will do not make any conflicts with other libraries.

  31. says

    Thanks so much !!
    I have many difficulte to find a code fonctional for my template.

    And your are the right code; thanks againe !!

    Reguards;
    C.Paterson

  36. Rolf says

    Hello, me and all my friends have used this a long time now – suddenly, last week, it didn´t work anymore.
    It stopped at the same time for us all!

    Anything we can do to solv this?

  38. Rolf says

    I have now updated the script, but it still doesn´t work.
    I have tried it with my own image, or with your image.

    I´m active in a forum for Blogger (in Sweden), and it stopped some weeks ago for hundreds of users. Many of them have also tried to update the script, without success.

    Have some friends in Germany, it stopped for them to.

    Any ideas?

    My testblogg, where I have it installed:
    http://rolfstestblogg.blogspot.se/

    • says

      due to limitations in public script hosting, we hosted all the scripts on our server. please update the new hosting scripts.

Trackbacks