How to add Go to Top and Go to Bottom Button using Jquery in blogger?

The Up and Down buttons can be used to navigate to the top and bottom of the page content, especially when on the main page there are many articles or when an article has too many comments. These buttons have a fade-In and fade-Out effect, this means that they will fade slightly when we are scrolling to the top or bottom of the page and additionally, have the function of going up/down the blog.

Demo

You can see a live demo on my blog, the buttons are located on the right side.

How to put Go Up and Go Down buttons using the jQuery slide effect

Step 1. Go to Template, click on the Edit HTML button
Step 2. Make backup of your template.
Step 3. Search (using CTRL + F) for the following piece of code:

]]></b:skin>

Step 4. Just above this code, paste this one:

    /* Up and Down Buttons with jQuery
    ----------------------------------------------- */
    .button_up{
    padding:7px; /* Distance between the border and the icon */
    background-color:white;
    border:1px solid #CCC; /* Border Color */
    position:fixed;
    background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6fJhk4xMPJHOrKLZf5-cQ9VVUNq4JZiPqyLf4XNL9Upr2KbD7fkk6VzbLl2wD7Ybp0RnzWEZ9bry9cC_QrRGVAbZ5_eF8ScTV4_O6IoCL61bVFhIcQ0MkN9YPzBgqyCa_h-AUsRV8myQ/s16/arrow_up.png) no-repeat top left;
    background-position:50% 50%;
    width:20px; /* Button's width */
    height:20px; /* Button's height */
    bottom:280px; /* Distance from the bottom */
    right:5px; /* Change right to left if you want the buttons on the left */
    white-space:nowrap;
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }
    .button_down{
    padding:7px; /* Distance between the border and the icon */
    background-color:white;
    border:1px solid #CCC; /* Border Color */
    position:fixed;
    background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTA-XE7OOZYan4li6BWhU7wy11Ml8KyBx-x9_eHoCcu15La843yAQfBbL-RNBhIwBJvvrjLg0AZJWjZJRIgmmyMLIoD2AlI4_cIRwFq8f5QdijCJXXaGKdB0ildRiQ7patioWrJwaUSY8/s16/arrow_down.png) no-repeat top left;
    background-position:50% 50%;
    width:20px; /* Button's width */
    height:20px; /* Button's height */
    bottom:242px; /* Distance from the bottom */
    right:5px; /* Change right to left if you want the buttons on the left */
    white-space:nowrap;
    cursor: pointer;
    border-radius: 3px 3px 3px 3px;
    opacity:0.7;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
    }

Step 5. Now search (CTRL + F) for this tag: 

</body>

Step 6. And just above it, paste the following code:

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

    <div class='button_up' id='button_up' style='display:none;'/>
    <div class='button_down' id='button_down' style='display:none;'/>

    <script>
    //<![CDATA[
    (function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

    $(function() {
    var $elem = $('body');
    $('#button_up').fadeIn('slow');
    $('#button_down').fadeIn('slow');
    $(window).bind('scrollstart', function(){
    $('#button_up,#button_down').stop().animate({'opacity':'0.2'});
    });
    $(window).bind('scrollstop', function(){
    $('#button_up,#button_down').stop().animate({'opacity':'1'});
    });
    $('#button_down').click(
    function (e) {
    $('html, body').animate({scrollTop: $elem.height()}, 800);
    } );
    $('#button_up').click(
    function (e) {
    $('html, body').animate({scrollTop: '0px'}, 800);
    } );});
    //]]>
    </script>
Step 7. Finally, Save your Template. Enjoy!