How to set awesome blogger back to top button with smooth scrolling

Add Back to Top Button With Smooth Scrolling in Blogger

Installing Smooth Back To Top in Blogger like my site - Maybe it's a lot of splatter on the internet about the tutorial
how to install the key back to the top in the blog and this time I will share tips about the tutorial.

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.

Here's how to installation:

1 - Login to Blogger Dashboard> select blogs> select Templates> then click the Edit HTML, save the following code after the <head> or before </ head>

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

If fontawesome already added on to your site than ignore this step.
2 - Save the below css before ]]></b:skin> or </style>

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

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

4 - After that Save the Template and see result.

Now enjoy the awesome Back to Top button in your blog. Happy Blogging and keep sharing our posts. Thanks.
Comment below if you have any problem ;)

NirSOFT

ads

How to set awesome blogger back to top button with smooth scrolling

Here's how to installation:

Ads