Search Box by All Blogger Tricks

Saturday 7 September 2013

Add Go to Top Button with CSS & Jquery


Freelance Jobs
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.8.2/jquery.min.js"></script>
<script type='text/javascript'>
jQuery(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")
 })
    }
});
jQuery(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!


<<<<<****************************************************************>>>>>
We hope you have Enjoyed this Widget & find it useful for you. If you have any Problem or Issue with this Widget, Please do visit the Official page of this Widget here way2blogging.org and directly ask the developer of this Widget for the Solution by Commenting there.

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