Saturday, 7 September 2013

Add Go to Top Button with CSS & Jquery

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

<br />
<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><br />

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.