Professional Magazine Blogger Templates Read More ×

Sunday, May 10, 2015

Install Back to Top Button With Smooth Scrolling

JSC Result 2016

www.nuedubd.com/jsc16

JSC Result 2016 will publish on 31th December 2016 Under Ministry of Education, Bangladesh. Check Your JSC Exam Result 2016 FAST!
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
SHARE THIS
Subcribe for our all latest news and updates

Subscribe Now

Previous Post
Next Post
Monetize your website traffic with yX Media
True Mag

1 comment: