How To Add Flat Scrolling “Back To Top” Button Into Blogger Blog

Performs a smooth page scroll to an anchor on the same page using JQuery, it is very cool way to attract your readers and maker your web site navigation easy.Today in this tutorial we will share a awesome JQuery smooth scrolling back to top button, It appears on the right side bottom only when the user scrolls down the page and disappears as he scrolls up. A back to top button is crucial for a blog or site because visitors enjoy easy site navigation so this button will provide them with this ease. We have kept the installation process a one step process. Please see this button in action towards the bottom right corner of this blog.





The markup uses the Unicode entity for a Up Arrow Triangle (▲) right in it. If you have a UTF-8 charset that should be no big deal..

How to add it to blogger blog

First You need to add this JQuery and JavaScript Code Snippet in your blogger template head section before closing </head> tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.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>

The follow the next steps below…

1. Login to your blogger dashboard.


2. Go to your blogger Layout.


3. Click Add A Gadget.


4. In Add A Gadget window, select HTML/JavaScript.


5. Copy the code below and paste it inside the content box. 

<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>

If you experience any issues, feel free to comment here. I'll love to hear feedback and try my best to fix bugs with the snippet. Stay connected for more spicy updates and don’t forget to share this tutorial with your friends.!! Enjoy!



Image Credit:- Cygnis Media