Scroll to Top

Tutorial Membuat Tombol Scroll to Top pada Website Agar Mudah Scroll Keatas


Bismillahirrohmanirrohim. Mungkin beberapa kali disaat teman-teman mengunjungi sebuah website akan menemukan sebuah tombol yang posisinya berada di kanan bawah sebuah layar yang ketika tombol tersebut diklik, maka layar website akan menggulung keatas (scroll). Tombol tersebut sering disebut sebagai Scroll to Top button. Bagaimana cara membuatnya? Kuy kita bikin sama-sama 🙂

Mengapa Perlu Membuat?

Tombol ini meskipun terlihat sepele, namun sebenarnya cukup membantu pengunjung website loh.

Bayangkan apabila pengunjung website telah panjang lebar membaca sebuah artikel, atau mungkin hanya mencari-cari artikel hingga ke dasar halaman dan kemudian hendak kembali keatas, maka akan cukup merepotkan apabila harus scroll keatas secara manual. Ditambah lagi apabila pengunjung membuka halaman websitenya dengan menggunakan perangkat mobile seperti tablet, ipad atau bahkan smartphone, maka akan cukup merepotkan bukan?

Nah, pada kesempatan inilah kita akan bersama-sama membuatnya.

Proses Pembuatan Scroll to Top Button

Untuk membuatnya cukup gampang, disini kita hanya perlu HTML dan Javascript saja, namun agar sedikit lebih menarik maka saya tambahkan sedikit CSS.

Oke, pertama silakan buka aplikasi teks editor kesayangan teman-teman semua lalu tulis sintaks berikut ini:

<!DOCTYPE html&gt;
<html&gt;
<head&gt;
<meta name="viewport" content="width=device-width, initial-scale=1"&gt;
<title&gt;Kangriyanto.net</title&gt;
<style type="text/css"&gt;
  body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
  }

  #scroll-btn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: red;
    color: white;
    cursor: pointer;
    padding: 15px 19px;
    border-radius: 100px;
  }

  #scroll-btn:hover {
    background-color: #555;
  }

  .sampel {
    min-height: 2000px;
  }
</style&gt;
</head&gt;
<body&gt;

<button onclick="topFunction()" id="scroll-btn" title="Top"&gt;&uarr;</button&gt;

<div class="sampel"&gt;
  <h1&gt;Silakan lakukan scroll kebawah</h1&gt;
</div&gt;


<script&gt;
// ketika pengunjung scroll kebawah 20px dari atas dokumen, maka tampilkan tombol scroll-btn
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop &gt; 20 || document.documentElement.scrollTop &gt; 20) {
    document.getElementById("scroll-btn").style.display = "block";
  } else {
    document.getElementById("scroll-btn").style.display = "none";
  }
}

// ketika tombol tersebut di klik, maka lakukan scroll keatas laman
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script&gt;

</body&gt;
</html&gt;

Silakan simpan file tersebut dengan nama bebas, misalnya scroll.html. Setelah itu silakan teman-teman jalankan file tersebut, maka hasilnya akan terlihat pada gambar diatas.

Tombol berwarna merah dengan anak panah menghadap keatas baru akan muncul ketika pengunjung website melakukan scroll kebawah setidaknya 20px dari keadaan normal. Dan ketika tombol tersebut diklik, maka laman website akan menggulung keatas.

Demikianlah tutorial membuat tombol scroll to top pada website agar mudah scroll keatas, semoga bermanfaat 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.