Cara Membuat Tombol Back To Top Dengan Efek Bounce

By |Updated: November 10, 2016 0 Comment

Tombol Back To Top Efek Bounce, Mungkin kita sudah sering jumpai fitur sederhana ini di blog/website, dan sepertinya sudah cukup umum digunakan. Satu tombol atau bisa juga berupa tulisan yang sederhana, namun memiliki fungsi yang sangat baik untuk kembali ke atas halaman. Banyak sekali versi-versi dari tombol ini dari yang sederhana dengan hanya menggunakan  tanda pagar “#”, bisa juga dengan menggunakan efek halus atau lainnya.

Tutorial dibawah ini mudah-mudahan cukup untuk menjelaskan tentang cara untuk membuat Tombol Back To Top dengan efek Bounce. Sesuai dengan namanya “Bounce Effect” tombol ini memberikan fungsi baik cara untuk melompat ke atas dengan efek bouncing atau memantul. Dibuat dengan tampilan dan sentuhan yang cukup manis, yang bisa memberikan nuansa tersendiri.

back to top

Image: back to top, pixabay.com

Tombol Back To Top 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 Back To Top Efek

<script src='//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>

Catatan: Kode ini memiliki banyak versi, saya menggunakan versi 2.2.4, kalo sudah dipasang dengan versi yang lain, lewati langkah ini agar tidak terjadi konflik, tapi usahakan menggunakan veri 2.x

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

CSS Back To Top Efek

#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 Back To Top Efek

<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>

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.

Tags:
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 4.00 out of 5)
Loading...

Leave a Reply

Your email address will not be published. Required fields are marked *