Cara Membuat Fungsi Back To Top dengan jQuery

18/10/2017    Risman Hakim    2144     Website

Berbicara mengenai tampilan website memang tidak ada habis nya, apalagi sekarang dengan banyak nya teknologi yang bisa kita pakai untuk membuat sebuah desain web, akan tetapi tampilan saja tidaklah cukup, maka dari itu sebuah web harus memenuhi untuk user interface atau biasa yang disebut UI. Unsur UI harus diperhatikan dalam setiap tampilan web, apakah webnya bisa mempermudah pengguna atau malah membuat bingung pengguna. Nah, berikut ini ada satu contoh unsur UI pada desain web yakni fungsi back-to-top. Fungsi back-to-top banyak sekali dipakai karena akan mempermudah pengguna dalam melihat halaman web. Bayangkan saja jika pada satu halaman web terdapat banyak konten maka otomatis kita sebagai pengguna harus scroll untuk melihat nya. Berbeda jika ada fungsi back-top-top tersedia pada halaman web maka kita cukup klik tombol back-to-top maka akan secara otomatis halaman akan menggulung atau scroll ke atas.
Nah, buat kalian yang ingin menggunakan fungsi back-to-top, kalian bisa menyimak tutorial sederhana berikut yakni bagaimana cara membuat fungsi back-to-top dengan jQuery, bagaimana cara membuat nya, langsung saja simak langkah-langkah nya berikut ini.
Langkah pertama kita akan membuat satu halaman yang bisa memuat konten banyak, kalian bisa menggunakan beberapa paragraf atau bisa dengan cara mengikuti struktur HTML5 berikut ini.

<body>
    <h1 class="text">
      Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    </h1>

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

Setelah membuat satu halaman dengan konten, langkah selanjutnya adalah kita akan sedikit desain tampilannya dengan kode CSS3 berikut ini.

body {
  background-image: url(https://www.toptal.com/designers/subtlepatterns/patterns/sports.png);
  height: 2000px;
  position: relative;
  font-family: helvetica;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.text {
  padding: 1em;
  margin: 3em auto;
  max-width: 437px;
  font-size: 2em;
  line-height: 1.2;
  font-weight: lighter;
}
.backTop {
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-block;  
  padding: 1em;
  margin: 1em;
  background: #E8E8E8;
  border: 2px solid #000;
}
.backTop:hover {
  cursor: pointer;
}

Berikut nya adalah, kita akan buat fungsi tombol back-to-top nya agar bisa 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>

Terakhir simpan filenya jika telah selesai mengetikan semua kode program diatas dengan benar. Kemudian lihat hasilnya dengan membuka browser, maka akan terlihat satu halaman yang bisa kalian scroll kebawah, dan akan tampil pula tombol back-to-top pada bagian bawah pojok kanan. Jika kalian klik tombol nya maka akan secara otomatis halaman akan menggulung ke atas.

Baiklah, cukup sekian tutorial mengenai bagaimana cara membuat fungsi back-to-top dengan jQuery, semoga bermanfaat dan selamat mencoba.

Artikel, jQuery, Web Design, Javascript, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More