Membuat Tombol Back To Top Sederhana dengan CSS dan Javascript

Fungsi dari tombol ini adalah membuat halaman yang sudah di scroll ke bawah menjadi ke atas kembali ketika tomkbol tersebut di tekan. Mungkin ada banyak plugin plugin jquery yang bisa di pasang dengan mudah tapi kali ini saya akan menjelaskan bagaimana cara Membuat Tombol Back To Top sederhana dengan CSS dan Javascript . Ayo langsung saja kita praktekan teman teman.

Pertama buka text editor kalian dan ketikan kode HTML di bawah ini dan beri nama dengan nama file index.html lalu jangan lupa kalian simpan file tersebut.

Index.html

<!DOCTYPE html>

<html>

<head>

  <title>Membuat Tombol back To Top</title>  

</head>

<body>


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


<div style="background-color:black;color:white;padding:30px">Scroll Ke Bawah</div>

<div style="background-color:#2ecc71;padding:30px 30px 2500px">

Scroll terus ke bawah dan tombol Back To Top akan muncul dan bila detak tombol tersebut maka halaman akan menjadi ke atas

</div>

</body>

</html>

Lalu setelah tag penutup </div> terakhir sisip kan kode javascript berikut dan jangan lupa di simpan.

<script>

// fungsi ketika user men scroll ke bawah 20 px maka tombol back to top akan muncul

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


function scrollFunction() {

    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {

        document.getElementById("myBtn").style.display = "block";

    } else {

        document.getElementById("myBtn").style.display = "none";

    }

}

// fungsi ketika user meng klik tombol back to top maka halaman akan menscroll ke atas


function topFunction() {

    document.body.scrollTop = 0;

    document.documentElement.scrollTop = 0;

}

</script>

Di atas ada penjelasan tentang kode javascript tersebut.

Terakhir kalian siap kan file baru dengan nama style.css guna nya untuk membuat style pada kode HTML yang kita buat tadi.

style.css

#myBtn {

  display: none;

  position: fixed;

  bottom: 20px;

  right: 30px;

  z-index: 99;

  border: none;

  outline: none;

  background-color: #f1c40f;

  color: white;

  cursor: pointer;

  padding: 15px;

  border-radius: 10px;

}


#myBtn:hover {

  background-color: #2c3e50;

}

Nah apabila tidak ada kesalahan maka fungsi tombol back to top pasti berhasil.

Sekian tutorial Membuat Tombol Back To Top sederhana dengan CSS dan Javascript semoga bermanfaat.. Keep Coding :D.

Membuat Tombol Back To Top Sederhana dengan CSS dan Javascript

Kategori