Membuat button kembali di php

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?

buat pemanggilan, bagusnya pake

atau ? aku coba pakai

 Back to top

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

Di bawah ini kita akan mempelajari cara membuat tombol “kembali ke atas”” dengan menggunakan CSS dan Javascript. Scroll back to top button atau tombol “kembali ke atas” ini biasanya digunakan ketika website memiliki panjang teks melebihi panjang layar untuk kembali ke atas

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

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

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

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

<div style="background-color:black;color:white;padding:30px">Scroll ke bawah</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">Contoh ini akan menunjukkan cara membuat tombol "scroll to top" yang terlihat
   <strong> saat pengguna mulai menggulir halaman</strong>.</div>

<script>
//dapatkan buttonnya
var mybutton = document.getElementById("myBtn");

// Saat pengguna mengscroll ke bawah 20px dari bagian atas dokumen, maka tunjukkan tombolnya
window.onscroll = function() {scrollFunction()};

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

// Saat pengguna mengklik tombol, scroll ke bagian atas dokumen
function topFunction() {
  document.body.scrollTop = 0;
  document.documentElement.scrollTop = 0;
}
</script>

</body>
</html>

Cara Membuat Scroll To Top Button

Langkah 1) Tambahkan HTML:
Buat tombol yang akan membawa pengguna ke bagian atas halaman saat diklik:
Contoh

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

Langkah 2) Tambahkan CSS:
Style tombol:
Contoh

#myBtn {
  display: none; /* Disembunyikan secara default */
  position: fixed; /* Posisi Fixed/sticky position */
  bottom: 20px; /* Tempatkan button di bagian bawah halaman */
  right: 30px; /* Tempatkan button 30px dari kanan */
  z-index: 99; /* Pastikan tidak tumpang tindih */
  border: none; /* Hapus borders */
  outline: none; /* Hapus outline */
  background-color: red; /* Atur warna background  */
  color: white; /* Warna teks */
  cursor: pointer; /* Tambahkan penunjuk mouse saat mengarahkan kursor */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Sudut membulat */
  font-size: 18px; /* Tingkatkan ukuran font */
}

#myBtn:hover {
  background-color: #555; /* Tambahkan background abu-abu tua saat mengarahkan kursor */
}

Langkah 3) Tambahkan JavaScript:
Contoh

//DApatkan buttonnya:
mybutton = document.getElementById("myBtn");

// Saat pengguna melakukan scrolling ke bawah 20px dari bagian atas dokumen, maka tunjukkan tombolnya
window.onscroll = function() {scrollFunction()};

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

// Saat pengguna mengklik tombol, scroll kembali ke bagian atas dokumen
function topFunction() {
  document.body.scrollTop = 0; // Untuk Safari
  document.documentElement.scrollTop = 0; // Untuk Chrome, Firefox, IE dan Opera
}

buttonHow Tohtml dan css

Untuk notifikasi implementasinya kita bisa lihat saat ingin posting atau membuat status di facebook, namun kita belum sempat mempublis, atau kita menekan tombol refresh pada browser biasanya akan muncul notifikasi, “Apakah anda ingin meninggalkan halaman ini?”.

Terkadang ketika sedang asyik membaca di suatu halaman web, apalagi yang halamannya sampai terlalu kebawah, sehingga saat ingin me-review kalimat sebelumnya dibagian atas, pembaca mungkin malas menggunakan scroll untuk kembali ke halaman sebelumnya . Jika anda web designer, untuk melengkapi suatu halaman agar dapat memudahkan si pembaca, maka Anda bisa membuatkan button untuk kembali ke atas.

Button atau tombol “kembali ke atas” berfungsi untuk mengembalikan posisi dari bawah kembali lagi ke atas dalam sebuah halaman website, Sehingga memudahkan pembaca atau pengunjung suatu halaman website untuk kembali ke atas tanpa menggunakan scroll. Silahkan download disini

Sumber : https://www.webhozz.com/blog/membuat-button-kembali-ke-atas/