상단으로 돌아가는 버튼을 어떻게 만들지

상단으로 롤링 버튼을 어떻게 만들지

첫 번째 단계 - 추가 HTML：

버튼을 생성하여 사용자가 페이지 상단으로 이동할 수 있게 합니다：

<button onclick="topFunction()" id="myBtn" title="맨 위로 이동">맨 위</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; // Safari에 대해
  document.documentElement.scrollTop = 0; // 적용 가능한 Chrome, Firefox, IE, Opera 브라우저
}

직접 시도해 보세요