Cara Membuat Scroll Back To Top Dengan JQuery – Ngomong-ngomong tentang penampilan situs web tidak habis, terutama sekarang dengan banyak teknologi yang dapat kita gunakan untuk membuat desain web, tetapi tampilan tidak cukup, sehingga dari web harus bertemu untuk antarmuka pengguna atau yang disebut UI.

Elemen UI harus dipertimbangkan di setiap tampilan web, apakah web dapat memudahkan pengguna atau bahkan membingungkan pengguna. Nah, berikut adalah salah satu contoh elemen UI pada desain web, fungsi back-to-top.

Baca Juga: Bikin Frosted Glass effect CSS HTML dengan Mudah

Cara Membuat Scroll Back To Top Dengan Menggunakan JQuery

Fungsi back-to-top banyak digunakan karena akan memudahkan pengguna untuk melihat halaman web. Bayangkan saja jika pada satu halaman web ada banyak konten maka kita secara otomatis sebagai pengguna harus bergulir untuk melihatnya.

Berbeda jika ada fungsi back-top-top yang tersedia di halaman web maka kamu cukup mengklik tombol back-to-top, halaman akan secara otomatis bergulir atau gulir ke atas.

Cara Membuat Scroll Back To Top Dengan Mudah

Nah, bagi Kamu yang ingin menggunakan fungsi back-to-top, Kamu dapat mendengarkan tutorial sederhana berikut, yaitu Cara Membuat Scroll Back To Top Dengan JQuery, bagaimana cara membuatnya, lihat saja yang berikut ini.

Baca Juga: Cara Kirim Push Notification Firebase dari PHP (FCM)

Bagian HTML

Langkah pertama kami akan membuat halaman yang dapat memuat banyak konten, kamu bisa menggunakan beberapa paragraf atau dapat dengan mengikuti struktur HTML5 berikut.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Jinno</title>
    </head>
  <body>
    <h1 class="teks">Jinno</h1>

    <div class="backTop">Back to Top</div>
  </body>

Bagian CSS

Setelah membuat satu halaman dengan konten, langkah selanjutnya adalah kita akan merancang sedikit tampilan dengan kode CSS3 berikut.

 <style>
      @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap");

      body {
        background-image: linear-gradient(to right, rgba(255, 61, 89, 1) 1.7%, rgba(252, 251, 44, 1) 97%);
        height: 2000px;
        position: relative;
        font-family: helvetica;
        letter-spacing: 1px;
        text-transform: uppercase;
      }
      .teks {
        max-width: 100%;
        max-height: 100%;
        justify-content: center;
        align-items: center;
        color: white;
        font-weight: 600;
        text-align: center;
        position: relative;
        font-size: 2em;
        font-family: "Poppins", sans-serif;
      }
      .backTop {
        position: fixed;
        bottom: 0;
        right: 0;
        display: inline-block;
        padding: 1em;
        margin: 1em;
        background: white;
        border: 2px solid #fff;
        border-radius: 100px;
      }
      .backTop:hover {
        cursor: pointer;
      }
    </style>

}

Bagian Jquery

Berikutnya adalah mimin akan membuat fungsi tombol back-to-top sehingga dapat berfungsi dengan baik dengan kode jQuery berikut.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    var $backToTop = $(".backTop");
    $backToTop.hide();
    $(window).on('scroll', function() {
      if ($(this).scrollTop() > 100) {
        $backToTop.fadeIn();
      } else {
        $backToTop.fadeOut();
      }
    });

    $backToTop.on('click', function(e) {
      $("html, body").animate({scrollTop: 0}, 500);
    });
</script>

Setelah itu, simpan file jika selesai mengetik semua kode program di atas dengan benar.

Kemudian lihat hasilnya dengan membuka browser, satu halaman akan terlihat bahwa Kamu dapat menggulir ke bawah, dan juga akan muncul tombol back-to-top di bagian bawah sudut kanan.

Jika Kamu mengklik tombol, itu akan secara otomatis halaman akan digulir.

Akhir Artikel

Tutorialnya segitu aja, tentang cara membuat fungsi back-to-top dengan jQuery, Semoga bermanfaat & sukses serta jangan lupa like, komen, dibagikan.