Cara Membuat Tombol Scroll Ke Atas pada website HTML sederhana

Menyediakan navigasi yang mudah digunakan pada sebuah website akan memberikan manfaat bagi pengunjung atau visitor website. Seperti hal nya tombol scroll ke atas ini sangat membantu pengunjung ketika berkenjung di website kita

Disaat pengunjung membuka sebuah artikel yang lumayan panjang dan pengunjung tersebut sudah berada pada akhir artikel pengunjung tidak perlu me-scroll beberapa kali untuk menuju ke atas hanya dengan menekan tombol back to top pengunjung akan dibawa ke posisi atas sebuah halaman website:

Berikut tag html yang diperlukan :

<button onclick="topUp()" id="btn-to-top" title=" ">Back To Top</button>

Posisikan kode tersebut di atas </body>. Berikut kode css yang kita butuhkan :

#btn-to-top {
  display: none;
  position: fixed;
  background-color: #cdccfe;
  color: #000;
  cursor: pointer;
  padding: 10px;
  border-radius: 5%;
  bottom: 20px;
  right: 30px;
  z-index: 100;
  font-size: 12px;
  font-style: none;
  border: none;
}

Letakan kode css di atas pada file .css atau teman - teman bisa tuliskan pada bagian <head> . Berikut kode js yang kita perlukan untuk menyempurnakan fungsinya :

window.onscroll = function() {scrollUp()};

function scrollUp() {
    if (document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
        document.getElementById("btn-to-top").style.display = "block";
    } else {
        document.getElementById("btn-to-top").style.display = "none";
    }
}
function topUp() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}

Simpan kode js di atas pada file .js atau teman - teman bisa menuliskan kode tersebut tepat di atas tak </body> jangan lupa memberikan kode <script> pada awal penulisan dan kode <./script> pada akhir kode tersebut.

Ketika pengunjung me-scroll 10px maka tombol tersebut akan muncul dan ketika tombol tersebut diklik makan akan membawa pengunjung pada posisi atas sendiri. Demikian ulasan yang dapat saya sampaikan semoga bermanfaat buat teman - teman, Terima Kasih

0 Response to "Cara Membuat Tombol Scroll Ke Atas pada website HTML sederhana"

Post a Comment

Silahkan berkomentar Sob tapi untuk beberapa komentar yang tidak sesuai seperti link aktif dan hal-hal yang tidak baik tidak akan ditampilkan !. Terima kasih

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel