Tombol Back To Top Dengan Menggunakan Efek Bounce

Efek Bouncing Untuk blog / website yang memiliki banyak informasi pada halamannya, mudah-mudahan bisa mendorong pengguna menelusuri lebih banyak konten-konten yang lainnya dengan fungsi tombol ini. Singkat cerita, beginilah alur kisah bagaimana cara membuatnya.

Catatan: Gunakan Pencarian kode yang dimaksud dengan klik kiri 1x pada kotak template kemudian tekan Ctrl + F, masukan kode yang dicari dan enter.

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/AVvXsEhCs1pRTu-iaY8pe8TYwfA30OO4ZbqZr8Nj3EvdDBskF7pMNW0jywj4eCuAoUFAjqG-tshJVezF-d3h5XGjVCtumeZ6rbfv9K0q015FiVFLUGjAG8zHnhrI6pUnDCc0iw3H6PQqVHZc56ra/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

Terima kasih telah berkunjung dan membaca. Mudah-mudahan Bermanfaat.