Back to top button bounce

Back to top button dengan efek bounce

by Arlina Fitriyani

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<body>
    
<h3><a href='http://arlinadesign.blogspot.com/2014/09/memasang-smooth-back-to-top-di-blog.html' target="_blank"> Kembali ke artikel </a></h3>
<div class='clear'/>    
<div id='content'>
<span class="awal">L</span>orem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fringilla venenatis odio, a consequat massa blandit ac. Mauris ornare sapien in neque venenatis, ac fermentum tortor scelerisque. Integer sed ultricies magna, vitae gravida eros.
</br>
</br>   
Etiam sapien massa, facilisis et semper in, sollicitudin ut turpis. Donec ac mauris dignissim, pretium enim non, vulputate est. Aliquam ut elementum enim, a vestibulum ipsum. Sed fringilla ac erat ut vulputate. Curabitur scelerisque, ligula non pretium venenatis, diam tortor sagittis mi, at malesuada risus leo nec est.
</br>    
Phasellus eleifend, purus a porttitor egestas, orci est porttitor ligula, et consequat diam tellus sed dolor. Aenean eu semper mauris, ut egestas nibh. Duis auctor pellentesque turpis, facilisis porta est tempus sed. Morbi vel congue eros. Sed non mattis urna.
</br>
</br>
Ut eu lobortis elit, eget ornare mauris. Praesent imperdiet erat consequat, egestas augue quis, vestibulum elit. Quisque eros urna, tempus vitae nulla nec, rhoncus faucibus mauris. Vivamus facilisis quam vel aliquet facilisis. Cras a lacus dictum, commodo mauris varius, pharetra sem.
</br>
Morbi ullamcorper ligula euismod ultrices ullamcorper.Sed non turpis quis tortor commodo placerat et eget enim. Ut mollis ut ipsum at posuere.
</br>
</br>
<span class="awal">I</span>nterdum et malesuada fames ac ante ipsum primis in faucibus. Mauris rutrum arcu odio, in consectetur ipsum cursus id. Fusce congue massa elit, sed pulvinar lacus scelerisque vitae. Duis bibendum justo ultricies neque tincidunt, ac bibendum turpis...

CSS

body{background:#f5f5f5;
    margin:0 0 0 0;
    padding:0 0 0 0;
}
h3{font-size:20px;
    font-weight:400;
    text-align:center;
    padding:15px;
    margin:15px auto;
    background:#2ba6e1;
    border-bottom:2px solid #2289bb;
    border-radius:3px 3px 5px 5px;
    color:#fff;
    width:200px;
    box-shadow:0 0 3px #e5e5e5;
    transition:all 0.5s ease-in-out;
}
h3 a {color:#fff;
    text-decoration:none;    
}
h3:hover {background:#3eb2ea;
}    
#content{background:#fff;
    color:#666;
    margin:25px auto;
    margin-bottom:40px;
    width:100%;
    max-width:900px;
    padding:25px;
    box-shadow:0 0 3px #e5e5e5;
    line-height:1.6em;
    display:block;
    border-bottom:2px solid #ddd;
    border-radius:3px 3px 5px 5px;    
}
.awal{float:left;
    color:#f35d5c;
    background:#fff;
    line-height:50px;
    padding-right:10px;
    font-family:times;
    font-size:50px;
}

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

JavaScript

$(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);
}