Cara membuat Tombol Back To Top Dengan Menggunakan Efek Bounce

1. Simpan kode JQuery berikut di atas </head> dibagian head.

JQuery

1<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'/>

Catatan: Kode ini memiliki banyak versi, saya menggunakan versi 1.7.2, kalo sudah dipasang dengan versi yang lain, lewati langkah ini agar tidak terjadi konflik.

2. Masukan kode CSS berikut diatas ]]></b:skin> atau diatas </style> dibagian head juga.

CSS

12345678910111213#Back-to-top {
    text-align: center;
    z-index: 9999;
    position: fixed;
    bottom: 40px;
    right: 30px;
    cursor: pointer;
    display: none;
    opacity: 0.7; 
    }
#Back-to-top:hover {
    opacity: 1;
    }

3. Masukan beberapa baris kode HTML berikut sebelum </body>.

HTML dan JavaScript

123456789101112131415161718192021<div id='Back-to-top'>
<img alt='Scroll to top' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfxSl5S64_H0RV2A9PZ1VHK2GQwfrcEy8mBdyJe09q8wVtgjcCLjWAhCh4EhBLraPMAGqd7zh1bQftTTA0IWNqFXlU1fsKibhR9SbwkyykQX8cfr11p1eBYK5UBJ2EAAITZdS94cgZ0xGI/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>

Catatan: Warna pink adalah link gambar, sebaiknya diganti menggunakan link punya sendiri, di save terus upload ke tempat punya sendiri, sedangkan angka-angka dalam JavaScript adalah pengaturan efeknya.

4. Selesai sudah cara membuatnya, tinggal di Save. Dan Lihat hasilnya
Scroll to top