Don't Miss

Add Go to Top Button with jQuery to Blogger

By Zohaib Liaqat - 2 Comments
Recently, we've shared Flat UI style Go to Top Button with jQuery for Blogger and today we've another jQuery Scroll to Top button similar to that one. Today we are going to share a simple Scroll to Top button with jQuery.Scroll to Top widget allow you users to go to top of the page with ease of a click. This button only appears when the user scrolls down the page and disappears as he scrolls up. So follow the steps below to add this widget to your blog:

How to Add Go to Top Button with jQuery

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: 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($) {
    $("#bgt-StoTop").scrollToTop();
});
</script>
<a href='#' id='bgt-StoTop' style='display:none;'>Scroll to Top </a>

Step 4. Hit the Save Button
And you're Done 

Tags:

2 comments to ''Add Go to Top Button with jQuery to Blogger"

ADD COMMENT
  1. Thanks for sharing.I found a lot of interesting information here. A really good post, very thankful and hopeful that you will write many more posts like this one.
    kodi.software
    plex.software
    luckypatcher.pro

    ReplyDelete
  2. The Best App Store to get paid and premium apps free is TutuApp APK For iOS And Android Both version are available.
    tutuappapkfree.com/tutu-app/
    TutuApp Download
    TutuApp Lite

    ReplyDelete