Latest News

Buat Tombol Back To Top Efek Bounce

Berikut cara menciptakan tombol back to top pada website, dapat di aplikasikan pada web blogger atau website yang tersusun dari CSS dan HTML.
dikala kita mengklik tombol back to top ini, halaman web akan terscrool ke atas, setelahnya akan ada efek bounce.

Kode CSS nya:
#Back-to-top {
    text-align: center;
    z-index: 9999;
    position: center;
    bottom: 70px;
    cursor: pointer;
    display: none;
    opacity: 0.7;
    }
#Back-to-top:hover {
    opacity: 1;
    }


Pasang script ini di dalam sesudah </style>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/></script>


Letakkan instruksi html ini di body

<div id='Back-to-top'>
<img alt='Scroll to top' src='https://lh6.googleusercontent.com/-18ivhAksPaU/Uqfnr_rXbbI/AAAAAAAAIzw/klENnMeM290/s128/backtotop.png'/>
</div>

<script type='text/javascript'>
$(function() { $(window).scroll(function() {
    if($(this).scrollTop()>400) {
        $('#Back-to-top').fadeIn();
        }
    else { $('#Back-to-top').fadeOut();}
    });
    $('#Back-to-top').click(function() {
        $('body,html')
        .animate({scrollTop:0},300)
        .animate({scrollTop:40},200)
        .animate({scrollTop:0},130)
        .animate({scrollTop:15},100)
        .animate({scrollTop:0},70);
        });
});
</script>