Javascript_javascript 스킬을 기반으로 맨 위로 돌아가기 버튼 구현

웹 페이지의 내용이 너무 많으면 데이터가 분할 화면으로 표시됩니다. 화면이 많을 경우 사용자가 접속한 데이터가 페이지 하단까지 도달하여 다시 표시되는 데 시간이 걸립니다. 이는 사용자 경험에 다소 해로울 수 있습니다. 따라서 페이지 데이터가 많은 웹페이지에서는 이제 "맨 위로 가기" 버튼을 사용하여 웹페이지 상단으로 빠르게 이동합니다.
이제 그러한 기능을 구현해 보겠습니다.

이 페이지에는 어떤 데이터도 쓰지 않을 것입니다. 상단으로 돌아가기 위한 버튼으로 태그를 추가하고 클래스 이름을 top으로 지정하기만 하면 됩니다.

<a href="#" class="top">顶部</a>

그런 다음 스타일시트를 설정합니다.

body {
  height: 3000px;
}

.top {
  position: absolute;
  top: 120px;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-decoration: none;
  text-align: center;
  background-color: #666666;
  color: #ffffff;
  right: 10px;
  transition: all 0.3s;
   visibility: hidden;
}
.top:hover {
  background-color: #ff3300;
}

여기서 본문은 주로 페이지 스크롤 효과를 제공하기 위해 높이를 3000으로 설정했습니다. 버튼은 일반적으로 웹 페이지의 오른쪽에 약간 아래에 배치됩니다.

또한 사용자가 방문하는 웹페이지가 페이지 상단에 있을 때는 이 버튼이 표시되지 않을 것이라는 점을 분석해야 합니다. 따라서 여기에서 가시성을 사용하여 버튼 표시 여부를 제어합니다.

인터페이스는 매우 간단합니다. 먼저 JS 구현을 분석해 보겠습니다.

우선 이 버튼은 웹페이지 전체에 영향을 미치기 때문에 전체 창에 스크롤 이벤트 모니터링을 설정해야 하므로 해당 창에 onscroll 이벤트를 설정합니다.

window.onscroll = function (e) {...}

이번 이벤트에서는 맨 위로 돌아가기 버튼의 상하 위치와 표시 여부를 제어합니다. 먼저 상하 위치 제어를 완료합니다.

상단 및 하단 위치를 제어하려면 사용자가 페이지에 들어갈 때 스크롤탑의 높이와 웹페이지의 단일 화면 표시 높이를 계산해야 합니다. 이 버튼을 페이지의 오른쪽 가운데에 배치합니다. 현재 페이지의 기본 계산은 다음과 같습니다.

var n_half_height = window.screen.height / 2;

이 값을 버튼의 상단 속성에 할당하세요.

그러면 사용자가 스크롤을 하면 당연히 위치는 변하지 않을 것이고 이때 계산은

var n_stop = e.target.scrollingElement.scrollTop; //获取scrollTop的高度
var n_top = n_stop + n_half_height;//得到位置

onsroll의 매개변수 이벤트인 e 개체입니다. 여기서는 Google Chrome을 사용하고 있습니다. 다른 브라우저는 테스트되지 않았습니다. 호환성이 필요한 경우 처리할 수 있습니다.
각 스크롤은 높이를 계산해야 하므로 onscroll 이벤트에 배치해야 합니다. 그런 다음 이 값을 버튼의 상단 속성에 할당해야 합니다.

물론 잊지 마세요. 즉, scrollTop이 0이면 버튼을 표시할 필요가 없습니다. 앞서 언급한 대로 버튼을 표시해야 합니다. 이를 제어하는 ​​가시성 속성을 사용하면 코드가 완성됩니다. 자바스크립트 전체 코드

var ele_body = document.body;
var ele_top = document.getElementsByClassName("top")[0];
var n_half_height = window.screen.height / 2;
ele_top.style.top = n_half_height + "px";
window.onscroll = function (e) {
 var n_stop = e.target.scrollingElement.scrollTop;
 if (n_stop === 0 ) {
  ele_top.style.visibility = "hidden";
 }else {
  ele_top.style.visibility = "visible";
 }
 var n_top = n_stop + n_half_height ;
 ele_top.style.top = n_top + "px";
}

최종 효과 표시:

위 내용은 이 글의 전체 내용입니다. 모든 분들의 공부에 도움이 되었으면 좋겠습니다.