Need a Professional Magazine Blogger Template? Check This ×

Sunday, May 10, 2015

Install Back to Top Button With Smooth Scrolling

SHARE THIS
Add Back to Top Button With Smooth Scrolling in Blogger

Installing Smooth Back To Top in Blogger  - 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 in your template then ignore it.

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

Subcribe for our all latest news and updates

Subscribe Now

Previous Post
Next Post

1 comment: