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

如何创建滚动到顶部按钮

第一步 - 添加 HTML：

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

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

第二步 - 添加 CSS：

I-set ang estilo ng button:

#myBtn {
  display: none; /* Sa pamamagitan ng default ay nakahihide"
  position: fixed; /* Naglagay ng fixed/sticky position"
  bottom: 20px; /* Naglagay ng button sa 20px sa ibaba ng pahina"
  right: 30px; /* Naglagay ng button sa layong 30px sa kanang bahagi ng pahina"
  z-index: 99; /* Nasisigurado na hindi ito ay nakasalalay"
  border: none; /* Nagtanggal ng border"
  outline: none; /* Nagtanggal ng outline"
  background-color: red; /* Nagset ng kulay ng background"
  color: white; /* Nagdagdag ng kulay ng teksto"
  cursor: pointer; /* Nagdagdag ng mouse pointer kapag may hover"
  padding: 15px; /* Nagdagdag ng padding"
  border-radius: 10px; /* Nagdagdag ng rounded corners"
  font-size: 18px; /* Nagdagdag ng laki ng font"
}
#myBtn:hover {
  background-color: #555; /* Nagdagdag ng dark gray background kapag may hover ng mouse"
}

Ika-tatlong hakbang - Magdagdag ng JavaScript:

// Hanapin ang button:
let mybutton = document.getElementById("myBtn");
// Ito ay magpapakita ng button kapag ang user ay nag-scroll ng 20px mula sa itaas ng dokumento
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    mybutton.style.display = "block";
  } else {
    mybutton.style.display = "none";
  }
}
// Ito ay gumagamit kapag ang user ay nag-click sa button, at sumascroll pabalik sa itaas ng dokumento
function topFunction() {
  document.body.scrollTop = 0; // Para sa Safari
  document.documentElement.scrollTop = 0; // Mga browser na Chrome, Firefox, IE at Opera
}

亲自试一试