Don't Miss

Add Go to Top Button with jQuery to Blogger

By Zohaib Liaqat - 3 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:

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

ADD COMMENT
  1. 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
  2. Your article is great. I'm glad to tell you about business essay writing . I checked there are a lot of writers working there. They can write an essay for me at any time. This is important to me.

    ReplyDelete
  3. Your article is great. I'm glad to tell you about https://writology.com/business-essay-writing business essay writing . I checked there are a lot of writers working there. They can write an essay for me at any time. This is important to me.

    ReplyDelete