12/10/2015

How to install "Back to the Top" button with smooth scrolling

This is really  great thing for the long posts, articles or whatever you have on your blog / website so this is really more than helpful and so easy to integrate into the system, at least in blogger will not be a problem, or any other platform because it works on jQuery system so it's everything in perfect order.


The role and function of the button back to top itself is quite important that makes it easy for visitors who want to go back to the top of the page mengscroll by simply clicking a button. Note: If an existing template back to top button, please remove it first.
So let's start and finish very quickly:


Log in to Blogger, then click the Edit HTML, save the following code after the <head> or before </head> tag.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

If fontawesome already added in your template then ignore it.

2 - Save the below css before ]]></b:skin> or </style>CSS
.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}

3 - Save the below JQuery and HTML before </body>Tag
<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){

    $(document).on( 'scroll', function(){

        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });

    $('.smoothscroll-top').on('click', scrollToTop);
});

function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

There you go... Just add these codes and that's it. If you have a problem, leave a comment. If you like, please Like, share, etc...

Free Download best free and premium High Quality Professional blogger templates for your blog available in all types. Free Premium Templates