Cara Membuat Back To top Dengan jQuery

Halo, ketemu lagi dengan saya 🙂 , kali ini saya akan share panduan sederhana mengenai Cara Merancang Back To top Dengan jQuery, mungkin untuk kalian telah tak asing lagi dengan yang namanya Back To top, yah benar sekali, Back To top ini benar-benar beguna sekali bagi kita, ketika kita sedang scroll konten dan kita hanya perlu klik tombol Back To top saja bagi kembali ke halaman atas, Nah kini kita akan bikin yang sederhana, berikut langkah-langkahnya.

Bagus, silahkan kalian bikin 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 Kegunaan Back To top, karenanya kita perlu beberapa konten, disini kita menggunakan konten paragraf, silahkan kalian bikin beberapa paragraf bagi konten nya, lebih banyak lebih bagus.

Setelah itu, kita akan pengaturan dulu konten nya dan merancang 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 telah, kita lanjutkan bagi merancang guna 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 seluruh diketika, jangan lupa simpan terlebih dahulu, kemudian silahkan kalian buka di browser nya, dan kalian scroll kebawah karenanya nanti akan keluar tombol Back To Top. Bagus demikian panduan mengenai Cara Merancang Back To top Dengan jQuery, semoga bermanfaat, amin.

Selamat mencoba 🙂

Sumber https://kursuswebsite.org