Recent Posts

October 02, 2011

Add Beautiful Go To Top Button With CSS & Jquery For Blogger / Blogspot

Go To Top Button With CSS & Jquery For Blogger
Go to Top button  is a link that sends your viewer to the top of page once clicked.
This will help your readers navigate better, especially so if you have long pages.
This link is usually located at the bottom of page or in the footer area.
And I am going to show how to add Go To Top Button With Css and Jquery.




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/ZrOOd.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">
#geekonik-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() {
        $("#geekonik-StoTop").scrollToTop();
    });
</script>
<a href='#' id='geekonik-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.
Back to TOP

widget by-Ayush Jain