Menambahkan tombol Scroll Back To Top

Pada saat menjelajah halaman web yang terdapat konten atau artikel yang cukup panjang hingga turun melakukan scrolling kebawah dari sebuah halaman web, kurang nyaman bila ingin kembali ke bagian atas dari halaman tersebut dengan melakukan scrolling kembali. Pembahasan kali ini kita akan mengulas bagaimana menambahkan tombol Scroll Back To Top, yaitu sebuah tombol untuk memudahkan kembali ke halaman paling atas dari halaman web yang ditampilkan. Dan kita akan menerapkan ini pada template Blogger.

Menerapkan HTML

Kode ini kita terapkan pada akhir bagian </header>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

Menerapkan CSS

Kode ini kita terapkan pada <b:skin>

#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

Menerapkan JavaScript

Kode ini kita terapkan pada akhir bagian </body>

// Get the button:
let mybutton = document.getElementById("myBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

Cara ini kita terapkan dari w3schools yang disertakan pada tautan diakhir bagian artikel ini.

Menerapkan perubahan JavaScript

Sebelumnya fungsi onscroll sudah digunakan untuk mengatur Navbar, seperti ini:

window.onscroll = function() {myFunction()};
function myFunction() {
  var navbar = document.getElementById("navbar");
  if (document.body.scrollTop >= 768 || document.documentElement.scrollTop >= 768) {
    navbar.className = "navbar" + " fixed-top" + " navbar-expand-lg" + " bg-body-tertiary"; 
  } else if (document.body.scrollTop <= 768 || document.documentElement.scrollTop <= 768) {
    navbar.className = "navbar" + " fixed-top" + " navbar-expand-lg" + " navbar-dark" + " bg-transparent";
  } else {
    navbar.className = navbar.className.replace(" navbar fixed-top navbar-expand-lg bg-body-tertiary", "");
  }
}

Karena pada template ini telah menggunakan fungsi JavaScript onscroll, maka disini nama fungsi scrollFunction dari w3schools, disesuaikan dengan fungsi yang ada myFunction. Jadi berikut ini kode tambahan atau perubahan yang dilakukan:

window.onscroll = function() {myFunction()};
function myFunction() {
  var navbar = document.getElementById("navbar");
  if (document.body.scrollTop >= 768 || document.documentElement.scrollTop >= 768) {
    navbar.className = "navbar" + " fixed-top" + " navbar-expand-lg" + " bg-body-tertiary"; 
  } else if (document.body.scrollTop <= 768 || document.documentElement.scrollTop <= 768) {
    navbar.className = "navbar" + " fixed-top" + " navbar-expand-lg" + " navbar-dark" + " bg-transparent";
  } else {
    navbar.className = navbar.className.replace(" navbar fixed-top navbar-expand-lg bg-body-tertiary", "");
  }
  // Get the button:
  let mybutton = document.getElementById("myBtn");
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

Itulah bagaimana cara menambahkan tombol Scoll Back To Top yang diterapkan pada blog ini, sehingga dapat memudahkan pembaca kembali ke bagian atas atau awal dari sebuah halaman web.

Bebebarapa bagian mungkin belum dituliskan disini, silahkan kunjungi kembali pada lain waktu. Karena kemungkinan akan diperbarui selagi penulis masih aktif menulis artikel di blog ini. Berikut ini tautan atau referensi untuk mempelajari lebih lanjut :

w3schools.com