Add a simple looking scrolling "Back to Top" Button to blogger blog

Posted by LAHAUL SETH ~ Comments

The back to top button helps blog readers to scroll back to top quickly when they have read a long post.

Just paste the following code in one of the HTML / Javascript gadget and save it.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<script>
    $(document).ready(function(){
        // hide #back-top first
        $("#back-top").hide();
     
        // fade in #back-top
        $(function () {
            $(window).scroll(function () {
                if ($(this).scrollTop() > 100) {
                    $('#back-top').fadeIn();
                } else {
                    $('#back-top').fadeOut();
                }
            });
            // scroll body to 0px on click
            $('#back-top a').click(function () {
                $('body,html').animate({
                    scrollTop: 0
                }, 800);
                return false;
            });
        });
    });
    </script>

 <style>
    #back-top {
    position: fixed;
    bottom: 30px;
    margin-left: -170px;
    }
    #back-top a {
    width: 45px;
    display: block;
    text-align: center;
    font: 8px/100% Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #666;
    /* transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;}
    #back-top a:hover {color: #000;}
    /* arrow icon undefinedspan tag) */
    #back-top span {
    width: 45px;
    height: 45px;
    display: block;
    margin-bottom: 7px;
    background: #000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtNuJ0zXE6OpD9GjrmQ-qlvcEZzrtHHBrLScrmSOjaT4nbjTv5OWiXKhUZfgnE_3zHy1vtomDEWXYhoxJpZ5QQvUuK1lxewgP1248xx_2VQhlZbf_ksM2SDaF6MSECzP9u91sDp0APNNrp/s1600/up-arrow.png) no-repeat center center;
    /* rounded corners */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    /* transition */
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;}
    #back-top a:hover span {   background-color: #000;}
    </style>
    <div id="back-top" style="display: block; ">
    <a href="#top"><span></span><font><font>Top</font></font></a>
    </div>

Note that if you remove the jquery library, it will still work but won't have the scrolling effect.