Selamat Membaca

Cover Membuat tombol Back To Top menggunakan Javascript, CSS dan HTML

Membuat tombol Back To Top menggunakan Javascript, CSS dan HTML

Cara bikin Website

Setelah tadi menambah mode gelap dan terang, sekarang saya baru saja menambah fitur baru pada website uwaiscode.my.id yaitu menambahkan tombol Back To Top menggunakan Javascript, CSS dan HTML. Alasannya sederhana, agar pengunjung diberi kemudahan ketika ingin kembali ke bagian atas dari halaman website ini.

 
Uwais Code @Saweria
 

Lalu bagaimana cara membuatnya? mari kita langsung saja dimulai tutorialnya.

  1. Buat file html dan berikan kode seperti berikut :
<!-- begin Demo Not necessary -->
<h1>Scroll down</h1>
<div class="matrix">
  <script>
    for (var i = 0; i < 4000; i++) document.writeln(i)
  </script>
</div>
<!-- end Demo Not necessary -->

<!-- begin Back to Top button -->
<a class="back_to_top" title="Наверх">&uarr;</a>
<!-- end Back to Top button -->

 

  1. Selanjutnya sisipkan kode css seperti berikut
/* begin Demo Not necessary  */
h1 {
  text-align: center;
}

.matrix {
  width: 400px;
  margin: auto;
  text-align: justify;
}
/* begin Demo Not necessary   */

/* begin begin Back to Top button  */

.back_to_top {
  position: fixed;
  bottom: 80px;
  right: 40px;
  z-index: 9999;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: #f5f5f5;
  color: #444;
  cursor: pointer;
  border-radius: 2px;
  display: none;
}

.back_to_top:hover {
  background: #e9ebec;
}

.back_to_top-show {
  display: block;
}


/* end begin Back to Top button  */

 

Uwais Code @Saweria
   

  1. Lalu sisipkan kode javascript seperti berikut
/* begin begin Back to Top button  */
(function() {
  'use strict';

  function trackScroll() {
    var scrolled = window.pageYOffset;
    var coords = document.documentElement.clientHeight;

    if (scrolled > coords) {
      goTopBtn.classList.add('back_to_top-show');
    }
    if (scrolled < coords) {
      goTopBtn.classList.remove('back_to_top-show');
    }
  }

  function backToTop() {
    if (window.pageYOffset > 0) {
      window.scrollBy(0, -80);
      setTimeout(backToTop, 0);
    }
  }

  var goTopBtn = document.querySelector('.back_to_top');

  window.addEventListener('scroll', trackScroll);
  goTopBtn.addEventListener('click', backToTop);
})();
/* end begin Back to Top button  */

 

Jika semua sudah selesai, jalankan dibrowser dan jika berhasil maka hasilnya akan seperti ini:

  Baik itulah sedikit penjelasan tentang membuat tombol back to top, semoga kita bisa mengambil ibroh dari postingan ini…

Barakallahufiikum…

 
Uwais Code @Saweria
 

Sumber : https://codepen.io/completewebco/pen/Powwxbd

WhatsApp
Telegram