Flat UI style Go to Top Button with jQuery for Blogger

Today we have another amazing widget for your "Scroll to top Widget". This widget allow you users to go to top of the page with ease of a click. This is a flat UI style Scroll to Top button and it only appears when the user scrolls down the page and disappears as he scrolls up. Follow the steps below to add this widget to your blog:

Add Metro Style Go to Top Button to Blogger

Step 1. Log in to your Blogger Dashboard

Step 2. Go to Template >> Click on Edit HTML and search (Ctrl + F) for the Following Tag

</body>

Step 3. Copy the Below code and Paste it just above/before the </body> tag

<style type='text/css'>
#bgt-StoTop {-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px; width:100px;background-color: #02ab68;background-color: #02ab68;filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#9902ab68',EndColorStr='#9902ab68');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #02ab68;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<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($) {
    $("#bgt-StoTop").scrollToTop();
});
</script>
<a href='#' id='bgt-StoTop' style='display:none;'>Back to Top </a>