Pure JS는 버튼을 클릭하여 페이지 상단으로 돌아가는 코드를 구현합니다.

컴퓨터에서 웹사이트를 탐색하든 휴대폰에서 웹사이트를 탐색하든 페이지를 아래로 슬라이드하면 오른쪽 하단에 사용자에게 바로 상단으로 돌아가라는 메시지를 표시하는 버튼이 있다는 것을 알고 계셨나요? 네이티브 JS를 사용하여 페이지를 맨 위로 되돌리려면 효과적인가요? 이 기사에서는 버튼을 클릭하여 상위로 돌아가기 위한 순수 JS 코드를 공유할 것입니다. 여기에는 특정 참조 값이 있으며 관심 있는 친구들이 참조할 수 있습니다.

페이지 상단으로 돌아가기 위해 버튼을 클릭하는 효과를 얻으려면 function(), document.getElementById(), if function 등과 같은 많은 JavaScript 지식이 필요합니다. 확실하지 않은 경우 다음을 수행할 수 있습니다. PHP 중국어 웹사이트에서 관련 기사를 참조하거나 JavaScript 비디오 튜토리얼을 방문하세요.

예시 설명: 사용자가 페이지를 아래로 슬라이드하면 스크롤 막대와 상단 사이의 거리가 20px보다 클 때 상단으로 바로 돌아가려면 버튼을 클릭하면 버튼이 사라집니다. 구체적인 코드는 다음과 같습니다.

HTML 부분:

<button onclick="topFunction()" id="myBtn" title="回顶部">JS返回顶部</button>
<div style="background-color:pink;color:white;padding:80px">向下滑动</div>
<div style="background-color:lightgrey;padding:80px 30px 2500px">页面内容，此处省略一万字</div>

CSS 부분:

*{padding: 0;margin: 0;}
   #myBtn {
     display: none;
     position: fixed;
     bottom: 20px;
     right: 30px;
     z-index: 99;
     border: none;
     outline: none;
     background-color: skyblue;
     color: white;
     cursor: pointer;
     padding: 15px;
     border-radius: 10px;
   }
   
   #myBtn:hover {
     background-color: plum;
   }

JavaScript 부분:

// 当网页向下滑动 20px 出现"返回顶部" 按钮
window.onscroll = function() {scrollFunction()};
  function scrollFunction() {console.log(121);
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
          document.getElementById("myBtn").style.display = "block";
      } else {
          document.getElementById("myBtn").style.display = "none";
      }
  }
   
  // 点击按钮，返回顶部
  function topFunction() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
  }

효과는 그림과 같습니다:

위에서 방법을 공유했습니다. 기본 JavaScript를 사용하여 버튼을 클릭하여 페이지 상단으로 돌아가는 코드를 구현합니다. 코드는 간결하고 단계가 상세합니다. 초보자도 직접 시도해 보고 코드가 페이지 상단으로 돌아가는 효과를 얻을 수 있는지 확인할 수 있습니다. 이 글이 도움이 되길 바랍니다!

더 많은 관련 튜토리얼을 보려면 JavaScript 중국어 참조 매뉴얼

을 방문하세요.

위 내용은 Pure JS는 버튼을 클릭하여 페이지 상단으로 돌아가는 코드를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!