Cara Membuat Back To top Dengan jQuery

Halo, ketemu lagi dengan saya 🙂 , kali ini saya akan bagikan tutorial sederhana mengenai Cara Membuat Back To top Dengan jQuery, mungkin bagi kalian sudah tidak asing lagi dengan yang namanya Back To top, yah benar sekali, Back To top ini sangat beguna sekali untuk kita, ketika kita sedang scroll konten dan kita hanya perlu klik tombol Back To top saja untuk kembali ke halaman atas, Nah sekarang kita akan buat yang sederhana, berikut langkah-langkahnya.

Baik, silahkan kalian buat struktur kode HTML seperti berikut.

    <div class="box-shadow">
        <h1> Lorem ipsum dolor sit amet,</h1>
    </div>
    <div class="btn">Top</div>

Nah, karena kita akan mendemokan Fungsi Back To top, maka kita perlu beberapa konten, disini kita menggunakan konten paragraf, silahkan kalian buat beberapa paragraf untuk konten nya, lebih banyak lebih bagus.

Setelah itu, kita akan setting dulu konten nya dan membuat tombol Back To top  dengan kode CSS3 berikut.

body{
   background: #484848;
}
.konten{
    box-shadow: 0 1px 1px rgba(0,0,0,0.25),
    0 10px 0 -5px rgb(255, 255, 255),
    0 10px 1px -4px rgba(0,0,0,0.15),
    0 20px 0 -10px rgb(255, 255, 255),
    0 20px 1px -9px rgba(0,0,0,0.15);
    width: 400px;
    min-height: 2222px;
    margin: 40px auto;
    background: #fff;
    padding: 15px;
    color: rgb(95, 95, 95);
    font-size: 10px;
}
.btn{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #078EBF;
    border: 2px solid #FFF;
    color: rgb(232, 232, 232);
    box-shadow: 3px 3px 7px #333;
    position: fixed;
    top: -100px;
    right: 30px;
    cursor: pointer;
    display: block;
    opacity: 0;
    text-align: center;
    line-height: 3.2;
    font-weight: bold;
    text-transform: uppercase;
    transition: all .8s cubic-bezier(0.42, 0, 0, 1.7);
}
.active{
    top: calc(100% - 100px);
    display: block;
    opacity: 1;
    right: 30px;
}

Kalo sudah, kita lanjutkan untuk membuat fungsi tombol Back To top dengan kode JS berikut ini.

/*global jQuery  */
jQuery(function () {
    'use strict';
    var varBtn = jQuery('.btn'),
        winSrcoll = jQuery(window),
        body = jQuery("body, html");

    jQuery(window).scroll(function () {
        if (winSrcoll.scrollTop() >= 500) {
            varBtn.addClass('active');
        }
        if (winSrcoll.scrollTop() < 500) {
            varBtn.removeClass('active');
        }
    });
    varBtn.click(function () {
        body.delay(222).animate({ scrollTop: 0 }, 222);
        return false;
    });
});

Setelah semua diketika, jangan lupa simpan terlebih dahulu, kemudian silahkan kalian buka pada browser nya, dan kalian scroll kebawah maka nanti akan keluar tombol Back To Top. Baik sekian tutorial mengenai Cara Membuat Back To top Dengan jQuery, semoga bermanfaat, amin.

Selamat mencoba 🙂