Scroll to Top jQuery button for Blogger




Want to add a stylish Scroll to Top Plugin to WordPress ? If Yes. Below are few simple steps to do so. The widget uses no image and the button is made from CSS. The scrolling effect in the plugin is due to the jQuery added.

The button will not appear when the scroll bar is at top i.e. page is not scrolled. As one scrolls a button will appear on the right bottom. Below is the procedure to add the button to your Blogger blog.
A demo of the the scroll to top button can be seen by clicking the below button.






Edit HTML and adding the code


Click on Edit HTML option in Blogger and search for  </body> tag in your template by pressing Ctrl + F. Add the below given code just above </body> and save the template. Thats it.

<style type="text/css">
#abt-Top {-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=&#39;#99EEEEEE&#39;,EndColorStr=&#39;#99EEEEEE&#39;);text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;}
</style>
<!-- Scroll to Top Plugin for Blogger by www.allbloggertricks.com-->
<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(&quot;href&quot;);
        if ($(window).scrollTop() != &quot;0&quot;) {
            $(this).fadeIn(&quot;slow&quot;)
        }
        var scrollDiv = $(this);
        $(window).scroll(function() {
        if ($(window).scrollTop() == &quot;0&quot;) {
        $(scrollDiv).fadeOut(&quot;slow&quot;)
        } else {
        $(scrollDiv).fadeIn(&quot;slow&quot;)
        }
    });
    $(this).click(function() {
        $(&quot;html, body&quot;).animate({
        scrollTop: 0
        }, &quot;slow&quot;)
    })
    }
});
jQuery(function($) {
    $(&quot;#abt-Top&quot;).scrollToTop();
});
</script>
<!-- Scroll to Top Plugin for Blogger by www.allbloggertricks.com-->
    <a href="#" id="abt-Top" style="display: none;">Scroll to Top </a>

You can customize the CSS to match your requirements. You can replace the CSS button with image by changing the CSS background with URL of the image that is using the tag background: url()

Your Scroll to top button is ready.

6 comments:

  1. Thank you so much . I have added this widget and it's working great. Please check my website.

    ReplyDelete
  2. Great widget, and ofcourse a great site. visit my site http://wintrixx.blogspot.in

    ReplyDelete
  3. work like a charm, Thank you so much

    ReplyDelete
  4. awesome......
    Thank u Sir.

    ReplyDelete
  5. Cheers.

    Works perfect. Just what I have been looking for. Simple yet elegant.

    ReplyDelete