How To Add Top/Bottom Scrolling Buttons in your Blog

Sometimes in our blog we have very long posts and after getting lots of comments on that post, the length of the page is further increased and it becames difficult for the readers to scroll down to bottom manually because it takes some extra time and if the readers reaches the bottom then again the same amount of work is required to reach the top again for new post.

Here is a small tutorial to add a beautiful top/bottom scrolling buttons in your blog so after that it will became very easy to reach top from bottom and bottom from top of the page. It not only saves times of the visitors but also makes your blog looks more professional. So follow these steps to apply it in your blog.

Add Top to Bottom and Bottom to Top Scrolling Buttons in your Blog

Step 1 : Open your blogger dashboard. Go to "Template" and then click on "Edit HTML" to open the code. Now click anywhere inside the box and using the keys Control+F open the search box.

Step 2 : Write the following code given below inside the box and hit enter to search it.

             </head>

Step 3 : Now copy and paste the following code just above it.

             <script src="https://kdcode.googlecode.com/svn/trunk/scrolling.js"></script> 

<script type="text/javascript"> 
$(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 (e) { 
            e.preventDefault(); 
            $('body,html').animate({ 
                scrollTop: 0 
            }, 800,function(){$("#back-bottom").show();}); 
            return false; 
        }); 
        $("#back-bottom a").click(function(e){ 
            e.preventDefault(); 
            var currentElem = $(this); 
            var scrollTopPos = $("div#topwrapper")[0].offsetHeight; 
            $('body,html').animate({ 
                scrollTop: scrollTopPos 
            }, 800,function(){$(currentElem).parent().hide();}); 
            return false; 
        }); 
    }); 
}); 
</script>

Step 4 : Now save the template and go to layout tab and then click on "Add a Gadget" as shown in picture below.

Step 5 : When you clicked on it, a popup window will appear, then from the list of gadgets shown, select HTML/Javascript. 

Step 6 : Copy the following code in the box opened.

             <style> 
#back-top { 
position:fixed; 
bottom:0px; 
right:0; 
display:block; 
background:#f2f2f2; 
color:#446cb3; 
opacity:.8; 
filter:alpha(opacity=80); 
width:80px; 
height:80px; 
z-index:99999; 
} 
#back-top:hover { 
background-color:#446cb3; 
text-decoration:none; 
color:#fff; 
opacity:1; 
filter:alpha(opacity=100); 
} 
#back-top span { 
position:relative; 
display:block; 
width:32px; 
height:80px; 
margin:0 auto; 
} 
#back-top span:before,#back-top span>.before {  
font-style:normal; 
font-weight:400; 
text-align:center; 
position:absolute; 
top:50%; 
font-size:32px; 
line-height:32px; 
width:32px; 
height:32px; 
margin-top:-16px; 
left:0; 
content:"\25B2"; 
} 
</style> 
<p id="back-top"><a href="#top" class="" title="BackToTop"><span></span></a></p>

Step 7 : Save the template and you are done ! You can check it on your blog that there will be two scrolling buttons.

I hope this tutorial helped you to add top/bottom scrolling buttons in your blog.