Menambah Tombol Go To Top Atau Scroll To Top Pada Pojokan Bawah

Menambah Tombol Go To Top Atau Scroll To Top Pada Pojokan Bawah, ini maksudnya untuk memudahkan pengunjung blog untuk kembali ke postingan atas setelah mereka scroll ke bawah.

Karena namanya Go To Top Atau Scroll To Top maka sebaiknya penempatannya ada di bawah, dan biasanya ada di pojok bawah kanan.

Ada banyak model dari tombol Go To Top Atau Scroll To Top ini, ada yang memakai Font Awesome, ada juga yang menggunakan jenis icon seperti ionicons dan lainnya.

Pada kesempatan ini saya akan mencoba menggunakan gambar saja biar lebih mudah dan lebih simpel dalam penerapannya.

Langsung saja kita siapkan kopi dan udud nya... eh maksudnya kita siapkan amunisinya yaitu Style CSS, code HTML dan Javascript nya.

Pertama kita siapkan Style CSS nya, ini fungsinya untuk mengatur letak tombol Go To Top Atau Scroll To Top, agar selalu berada di pojok kanan bawah dari blog kita.

<style>
#myBtnSc {
  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 */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 0px; /* Some padding */
  border-radius: 100px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
  
}
</style>

Yang kedua kita siapkan code HTML nya, penempatan code ini tidak akan mempengaruhi letak tombol Go To Top Atau Scroll To Top, karena pada style CSS sudah kita seting position: fixed, bottom: 20px; dan right: 30px; Jadi posisi tombol nanti akan tetap berada pada pojok kanan bawah. Untuk alamat gambarnya bisa diganti sesuai selera temen2 Blogger.

<img width="30px" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheRavZQ1ahyphenhyphenq29tZ9KZFPc8Uar4Ysti18xyNCg8tyjhHmcOZLHpZEcQWNkbD_Hm3qBI0Qol7BWAmPv9kbEHkW6t93GpXiujZLvJFRrgNG5Y1F-yWO1olJt0n4RsEFCndqONoaAscyYwx7F/s72/top.png" onclick="topFunction()" id="myBtnSc" title="Go to top" />

Ok yang terakir kita siapkan Javascript nya, ini nanti fungsinya untuk eksekusi scroll ke atas saat tombol kita klik, dan juga berfungsi untuk menampilkan serta menyembunyikan tombol Go To Top Atau Scroll To Top. 

<script>
//Get the button:
mybutton = document.getElementById("myBtnSc");

// 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() {
  $('html, body').animate({scrollTop:0}, 'slow');
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>

Nah, sudah lengkap amunisi kita, langsung saja kita coba eksekusi pada template kita. Untuk penempatan ketiga code diatas tidak harus terpisah, bisa juga di jadikan satu pada widget kalau kita memakai blogger. Namun kebanyakan penempatan code ini berada di atas </body>.

"Happy Coding"