Sunday, June 16, 2013

How To Install Go To Top Button To Blogger?


How To Put Smooth Scrolling "Back To Top" Button Using jQuery for Blogger


scroll to top

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


How To Install Go To Top Button To Blogger?

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



<style type="text/css">
#MD-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() {
    $("#MD-StoTop").scrollToTop();
});
</script>
<a href='
http://pro-blogging-tips.blogspot.com/' id='MD-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!

No comments:

Post a Comment