Tutorial Membuat Fitur Back to Top Dengan HTML, CSS dan JQuery - Fiqisulaiman | Blog

Back to top artinya sebagai kembali ke atas (awal) yang biasa nya digunakan untuk website yang memiliki halaman yang sangat panjang.

Fitur back to top ini memang sangat sederhana namun memiliki efek yang baik pada website, sehingga pengunjung pada saat ingin kembali ke halaman awal tidak perlu lagi memainkan roda mouse untuk kembali ke halaman awal.

Bayangkan, jika sebuah website berita dengan isi konten yang sangat panjang dan pengunjung ingin membaca berita lain namun tidak ada navigasi pasti pengunjung tidak akan mau lagi mengunjungi website tersebut.

Pada artikel ini kita akan belajar tentang cara membuat fitur back to top dengan jQuery. Oke langsung aja kita mulai berikut ini.

Oke, pertama-tama yang kita butuhkan yaitu file JQuery nya, jika tidak ada JQuery ini fungsi Back to Top tidak bisa berfungsi.

JQuery

<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

Berikutnya adalah kita butuh suatu link atau button untuk digunakan sebagai fungsi back to top nya.

HTML

<a href="#" class="go-top">Go top</a>

Taruh code tersebut di atas </body> atau <footer>.

Selanjutnya, code JQuery, nah code JQuery inilah yang akan membuat fitur back to top nya aktif. Logika nya kira-kira seperti ini, Jika halaman web di scroll lebih dari ukuran 200 maka tampil Back to Top nya.

JQuery

<script type="text/javascript">
    $(document).ready(function() {
      // Show or hide the sticky footer button
        $(window).scroll(function() {
          if ($(this).scrollTop() > 200) {
            $('.go-top').fadeIn(200);
          } else {
            $('.go-top').fadeOut(200);
          }
        });
        // Animate the scroll to top
        $('.go-top').click(function(event) {
          event.preventDefault();
          $('html, body').animate({scrollTop: 0}, 300);
        })
     });
</script>

Berikutnya, kita akan mempercantik tampilan tombol Back to Top nya dengan CSS.

CSS

.go-top {
  position: fixed;
  bottom: 2em;
  right: 2em;
  text-decoration: none;
  color: white;
  background-color: #000;
  font-size: 12px;
  padding: 1em;
  display: none;
}

.go-top:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

Jika sudah, silahkan test pada website atau projek anda, maka akan tampil di ujung kanan bawah pada browser kalian. Sekian tentang tutorial cara membuat tombol back to top dengan HTML, CSS dan JQuery semoga bermanfaat dan jangan lupa untuk share ke temen kamu.