Add Go to Top Button with CSS & Jquery for Blogger / Blogspot

March 19, 2011   /   Posted by in Blogger Jquery, Blogger Widgets 25 Comments
Add Go to Top Button with CSS & Jquery for Blogger / Blogspot

Add “Go to Top Button” with CSS and Jquery. It is a Shortcut to come to top when you are at Bottom of page.

Demo For CSS Button : Go to Bottom of This Page and See it’s Action at Left Bottom Corner

Demo For Jquery Button : Go to Bottom of This Page and See it’s Action at Right Bottom Corner

Add ‘Scroll to Top’ Button With CSS:-

- Use the Following Button To add this Widget on your Blog Easely




OR

-Use the Following code and Put it before </body> tag on your Template and Save.

<a title="Back to TOP" style="position: fixed; right: 15px; bottom: 15px; outline: medium none; border: 0px none;" href="#"><img border="0" alt="Back to TOP" src="http://i.imgur.com/Ffb7p.png"></a>

Add ‘Scroll to Top’ Button With jQuery:-

-Use the Following Button To add this Widget on your Blog Easely



OR

-Use the Following code and Put it before </body> tag on your Template and Save.

<style type="text/css">
#w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type='text/javascript'>
$(function() {
    $.fn.scrollToTop = function() {
	$(this).hide().removeAttr("href");
	if ($(window).scrollTop() != "0") {
	    $(this).fadeIn("slow")
	}
	var scrollDiv = $(this);
	$(window).scroll(function() {
	    if ($(window).scrollTop() == "0") {
		$(scrollDiv).fadeOut("slow")
	    } else {
		$(scrollDiv).fadeIn("slow")
	    }
	});
	$(this).click(function() {
	    $("html, body").animate({
		scrollTop: 0
	    }, "slow")
	})
    }
});
$(function() {
    $("#w2b-StoTop").scrollToTop();
});
</script>
<a href='#' id='w2b-StoTop' style='display:none;'>Scroll to Top </a>

You can Customize the CSS for Your Own Declarations and you can replace the text with Image also.

You Are Done!



Back to TOP

Do you Like this Article?

rss twitter facebook
Get Subscribe to Free Email Updates!!
*Your email address will not be shared with anyone.

25 Comments on “Add Go to Top Button with CSS & Jquery for Blogger / BlogspotAdd Comment

  1. email encryption service March 22, 2011 6:19 am #

    Switching the text to an image can be done by modifying the CSS.

  2. Harish March 22, 2011 6:27 am #

    @email encryption service
    yes!
    Add image as background image and specify the width and height.
    one of the important css declaration for this type is text-indent and is specify as -9999em to disappearing text.

    That's All!

  3. Paul Santosh March 29, 2011 9:13 am #

    scroll to top not working in my blog www.paulsantosh.com

  4. Harish March 29, 2011 1:11 pm #

    @Paul Santosh
    You Have more then one jquery plugin
    so remove duplicate jquery plugins
    it works fine :)

  5. Paul Santosh April 5, 2011 7:02 am #

    ok

  6. Neena April 6, 2011 1:33 pm #

    Thank you for the code. This is exactly what i was looking for. :)
    I have 2 questions though, can you show me how to
    1. add more buttons using this, like for ex. home button etc (each button will have different links)
    2. use mouseover and mouseout option for image change in this function?

    Thanks once again.

  7. Paul Santosh April 9, 2011 8:24 am #

    how to remove duplicate JQuery plugins??????????

  8. Anonymous May 1, 2011 9:59 pm #

    thanks a lot..i like u'r tips awesome

  9. StrawberyWhite August 10, 2011 9:53 am #

    Jquery not work on my blog. Only work with css. Need help with it

  10. Just Some Random Person September 3, 2011 8:10 am #

    Jquery didn't work for me either. Thanks again. I'm probably flooding your blog with the label thing and the read more. I got it to work already. Thanks

  11. Tanakwagu October 6, 2011 7:06 am #

    thanks for this post i used normal script(not scroll)

  12. arhamvhy November 22, 2011 7:02 am #

    Wow, very cool..
    I want to try it
    thanks

  13. Sangeet Singh November 23, 2011 1:30 pm #

    awesome man!!!
    http://sanship.co.cc

  14. arhamvhy December 4, 2011 5:56 am #

    very cool..

    i want use it for my blog

  15. man December 9, 2011 7:30 am #

    thanks for sharing

  16. Have A Nice Day Friend December 9, 2011 2:01 pm #

    Scroll To Top Button Goes Behind The Template What To Do

  17. Danialde4 December 22, 2011 4:51 pm #

    Cool ^_^

  18. Marko December 25, 2011 9:00 am #

    Thanks, working just fine

  19. Anuj Sharma December 26, 2011 4:05 am #

    what the hell harish
    Error parsing XML, line 519, column 3: The content of elements must consist of well-formed character data or markup.
    www.ptmaroct.blogspot.com

  20. Izy March 16, 2012 8:34 am #

    it works! thankz.

  21. prince Sam April 10, 2012 3:59 am #

    Its not working in explorer. any adia how to fix it please?

    • Harish April 12, 2012 1:11 pm #

      What is your blog url?

  22. Mohammad Haroon May 14, 2012 12:24 pm #

    How can i change the position of left jquery “Scroll To Top” Button from right to left ?

  23. Mohammad Haroon May 14, 2012 12:51 pm #

    Got The Answer Change Right To Left in “” right:10px “”

  24. yousef June 3, 2012 12:06 pm #

    how to change “Scroll to Top”
    to background image

    Leave a Reply

     
    © 2012 Way2blogging. Designed by +Harish, Powered by WordPress