How To Add Back To Top Buttons For Blogger With jQuery

Would you like to add an elegant Back To Top Buttons For Blogger With jQuery? If your answer is Yes. Below are usually a few basic steps to do so. The Back To Top widget uses no image and the button is made of CSS. The scrolling effect within the plugin is because the jQuery added in.

The button won't appear if your scroll bar is at the top when i. e. page just isn't scrolled. After scrolling the page a button will appear on the right bottom of the page. Below is the procedure to add the button for a Blogger blog.
A demo of the Back To Top button for blogger can be seen by pressing the below button.


Back To Top Buttons For Blogger
Back To Top Buttons For Blogger


    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. That's it.
    <style type="text/css">
    #btt-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.bloggertrickstips.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;#btt-Top&quot;).scrollToTop();
    });
    </script>
    <!-- Scroll to Top Plugin for Blogger by www.mychakri.com-->
        <a href="#" id="btt-Top" style="display: none;">Back To Top </a>
You can customize the CSS to match your requirements. You can replace the CSS button with an image by changing the CSS background with the URL of the image that is using the tag background: URL()


So that's the simple steps to add a professional Back To Top button to your blogger blog. Share this post with your friends and write your views in comments till then Peace, Blessings and Happy Scrolling.

you can also read my post: How To Add social media buttons for Blogger?

0 Comments