如何创建：返回页面顶部的按钮

学习如何使用 CSS 创建“滚动回到顶部”按钮。

亲自试一试

如何创建滚动到顶部按钮

第一步 - 添加 HTML：

创建一个按钮，单击该按钮会将用户带到页面顶部：

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

第二步 - 添加 CSS：

ການກະຈາຍຮູບແບບຄູ່ມື:

#myBtn {
  display: none; /* ການບັດເທິງບໍ່ສະແດງ */
  position: fixed; /* ການຕິດຕັ້ງຢູ່ບ່ອນທີ່ຢູ່ */
  bottom: 20px; /* ການຕິດຕັ້ງຄູ່ມືທີ່ຫ່າງສຳລັບບລັງ 20px */
  right: 30px; /* ການຕິດຕັ້ງຄູ່ມືທີ່ຫ່າງຂ້າງຊ້າຍບລັງ 30px */
  z-index: 99; /* ການກະຕຸ້ມທີ່ບໍ່ຈະຫຼົງຫຼາຍ */
  border: none; /* ການລົບລ້າງຊາບ */
  outline: none; /* ການລົບລ້າງກາງ */
  background-color: red; /* ການກະຈາຍສີສີແດງ */
  color: white; /* ສີຂີ້ງ */
  cursor: pointer; /* ການເພີ່ມສິ່ງທີ່ຫາກຳລັງນິຍົມ */
  padding: 15px; /* ການເພີ່ມຂອບກອງທາງໃນ */
  border-radius: 10px; /* ການສະໝອງວົງ */
  font-size: 18px; /* ການເພີ່ມຂະໜາດມີຕົວຊີວິດ */
}
#myBtn:hover {
  background-color: #555; /* ການເພີ່ມ ສີຫຼວງຫຼາຍ ຄືກັບມັນກຳລັງນິຍົມ */
}

ບາງສິ່ງທີ່ຕ້ອງເຮັດທີສາມ - ສະເໜີ JavaScript:

// ການຮຽບຮ້ອງຄູ່ມື:
let mybutton = document.getElementById("myBtn");
// ບໍ່ມີຜູ້ນຳໃຊ້ຄົງຄວາມນິຍົມບ່ອນທີ່ຢູ່ຂອງເຄື່ອງຫຼິ້ນ 20px ລົງມາ
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// ບໍ່ມີຜູ້ນຳໃຊ້ຄົງຄວາມນິຍົມບ່ອນທີ່ຢູ່ຂອງເຄື່ອງຫຼິ້ນ
function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // ສຳລັບ Chrome、Firefox、IE ແລະ Opera ບຣາຍສະແດງ
}

亲自试一试