bagaimana cara membuat tombol back to top?

Mau tanya cara buat back to top offline, baru belajar jquery. Coba ikutin yang ada diinternet, cuma muncul tombolnya aja, tapi sewaktu di klik ga scroll ke atas. script jquery ini di pisah atau di gabung sama file htmlnya ya?

 <script type="text/javascript">
    var $backToTop = $(".backTop");
    $backToTop.hide();
    $(body,html).on('scroll', function() {
      if ($(this).scrollTop() > 100) {
        $backToTop.fadeIn();
      } else {
        $backToTop.fadeOut();
      }
    });

    $backToTop.on('click', function(e) {
      $("html, body").animate({scrollTop: 0}, 500);
    });
</script>

buat pemanggilan, bagusnya pake <div> atau <span>? aku coba pakai <span>

 <span class="backTop">Back to top</span>

tolong koreksinya ya kalau ada yang salah di codingnya...

jquery html php

@20pizu

6 Kontribusi 0 Poin

Diperbarui 5 tahun yang lalu

6 Jawaban:

Jawaban Terpilih

saya pakai cara sbb

 <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
}

#tombolNya {
  z-index: 99; /* agar tak tersembunyi di balik element lain */
  font-size: 18px;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  border: none;
  outline: none;
  background-color: red;
}

#tombolNya:hover {
  background-color: #555;
}
</style>
</head>
<body>

<button onclick="halamanBerGerakKeAtas()" id="tombolNya" title="Kembali ke atas halaman">Top Of Page</button>
<!-- div setinggi 2200 pixel hanya contoh agar tombolnya berada di luar halaman-->
<div style="background-color:#0066FF;color:white;padding:30px">Scroll ke bawah untuk melihat tombol</div>
<div style="background-color:lightgrey;padding:30px 30px 2200px">Saya hanya pasang div di sini sebagai content agar ada tempat untuk contoh scroll</div>

<script>

window.onscroll = function() {fungsiScrollnya()};
// tombol akan muncul setelah scroll barnya di turunkan 20 pixel
function fungsiScrollnya() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("tombolNya").style.display = "block";
    } else {
        document.getElementById("tombolNya").style.display = "none";
    }
}

function halamanBerGerakKeAtas() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0; // 0 untuk kembali kepaling atas halaman, ubah jikalau perlu
}
</script>

</body>
</html>

coba paste ke notepad dan simpan sebagai html lalu buka di browser untuk lihat hasilnya siapa tahu bermanfaat

@VikSintus

96 Kontribusi 36 Poin

Dipost 5 tahun yang lalu

@VikSintus terima kasih

@20pizu

6 Kontribusi 0 Poin

Dipost 5 tahun yang lalu

kalau membuat lebih smooth gmna teman teman

@prabowoagung

1 Kontribusi 0 Poin

Dipost 5 tahun yang lalu

animate({scrollTop: 0}, 500)

nilai 500 itu sepertinya bisa diganti lebih besar. Satuannya milidetik, jadi 500 itu berarti 500 milidetik atau 0,5 detik.

@arclipse

14 Kontribusi 7 Poin

Dipost 5 tahun yang lalu

itu kalo pake javascript tanpa jquery gimana gan @arclipse

animate({scrollTop: 0}, 500)

@yudono

55 Kontribusi 17 Poin

Dipost 5 tahun yang lalu

Bisa pake punyanya bang @VikSintus itu kan pake DOM. Biar ada animasinya yang di bagian ini dirubah:

document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;

Menjadi ini:

document.body.animate({scrollTop: 0}, 500);
document.documentElement.animate({scrollTop: 0}, 500);

Disclamier: Saya secara personal belum mencobanya, hanya mencari beberapa referensi dan menyimpulkan. Please kindly inform me if it works or not :)

Reference: https://developer.mozilla.org/en-US/docs/Web/API/Element/animate https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

@arclipse

14 Kontribusi 7 Poin

Dipost 5 tahun yang lalu

Kelas Premium! Belajar bikin website dari nol sekarang

bagaimana cara membuat tombol back to top?

Kelas Premium!
Belajar bikin website dari nol sekarang