눈에 띄지 않는 스크롤 투 탑 버튼을 만드는 방법

상단 버튼으로 편리하게 돌아 오면 사용자가 스크롤하려는 노력없이 페이지 상단으로 빠르게 돌아 오는 데 도움이됩니다. 이 기능은 컨텐츠가 풍부한 페이지, 단일 페이지 웹 사이트 (특히 무제한 스크롤을 사용할 때) 및 다양한 화면 크기의 모바일 장치에 특히 유용합니다.

이 버튼은 일반적으로 웹 사이트의 하단에 매달려 있으며 클릭하여 페이지 상단으로 돌아갑니다. JavaScript로 쉽게 만들 수 있지만 충분히 큰 클릭 영역을 유지하면서 시각적으로 눈에 띄지 않습니다. 단순에서 복잡한 몇 가지 구현 방법을 살펴 보겠습니다.

방법 1 : 간단한 구현

먼저 JavaScript를 사용하여 버튼을 선택하십시오.

 var scrolltotopbtn = document.getElementById ( "scrolltotopbtn");

document.documentElement 문서의 루트 요소를 반환하고 오프셋 값을 얻는 데 사용됩니다. 코드 호출을 용이하게하기 위해 rootElement 라는 변수로 저장하십시오.

 var rootelement = document.documentElement;

버튼에 클릭 이벤트 리스너 추가 :

 함수 scrolltotop () {
  // 최고 논리로 돌아 가기}

scrolltotopbtn.addeventListener ( "Click", ScrollTotop);

scrollToTop 함수에서 scrollTo 메소드를 사용하여 화면 상단으로 스크롤하십시오.

 함수 scrolltotop () {
  // 상단 로직으로 돌아 가기로 돌아와서 scrollto ({{
    상단 : 0,
    행동 : "매끄러운"
  });
}

스타일을 약간 조정하십시오.

 #scrolltotopbtn {
  배경색 : 검은 색;
  국경 : 없음;
  국경-라디우스 : 50%;
  색상 : 흰색;
  커서 : 포인터;
  글꼴 크기 : 16px;
  라인 높이 : 48px;
  너비 : 48px;
}

페이지 하단에 버튼을 놓습니다 (예 : 바닥 글).

 <button id="scrollToTopBtn">☝️</button>

효과는 다음과 같습니다. (방법 1의 렌더링은 여기에 표시되어야합니다)

방법 2 : 스크롤 위치를 감지합니다

스크롤 이벤트 리스너를 사용하여 스크롤을 감지합니다.

 함수 handlescroll () {
  // 스크롤 이벤트 처리}
document.addeventListener ( "scroll", handlescroll);

handleScroll 기능은 사용자가 스크롤 할 때마다 호출됩니다. 스크롤 가능한 총 픽셀 수를 가져와야합니다.

• scrollHeight 오버플로로 인해 보이지 않는 부품을 포함하여 요소 높이를 반환합니다.
• clientHeight 요소의 보이는 부분의 높이 (픽셀)를 반환합니다.

scrollHeight Minus clientHeight 는 수직으로 스크롤 할 수있는 총 픽셀 수입니다.

 var scrolltotal = rootelement.scrollheight -RootElement.clientHeight;

scrollTotal 변수는 수직으로 스크롤 될 수있는 최대 픽셀 수를 나타냅니다. 스크롤 금액을 총 스크롤 픽셀 수로 나누어 0과 1 사이의 비율을 얻습니다.이 스케일의 경우 버튼을 표시/숨기기 쉽습니다.

예를 들어, 사용자가 페이지의 총 높이의 80%로 스크롤하면 상단으로 돌아 오는 버튼이 표시됩니다 (비율은 0.80). 80%는 임의의 값이며, 1에 가까울수록 버튼을보기 위해 더 많은 스크롤해야합니다.

JavaScript 코드는 다음과 같습니다.

 var rootelement = document.documentElement;

함수 handlescroll () {
  // 스크롤 이벤트 처리 var scrolltotal = rootelement.scrollheight -RootElement.ClientHeight;
  if ((rootElement.scrolltop / scrolltotal)> 0.80) {
    // 표시 버튼 ScrollTotOpBtn.classList.Add ( "showbtn");
  } 또 다른 {
    // 버튼 숨기기 ScrollTotOpBtn.classList.Remove ( "showbtn");
  }
}

document.addeventListener ( "scroll", handlescroll);

버튼을 올바르게 찾으려면 일부 CSS가 필요합니다.

 .scrolltotopbtn {
  /* 이전과 동일한 일반적인 스타일*/

  /* 오른쪽 하단에 배치*/
  위치 : 고정;
  하단 : 30px;
  오른쪽 : 30px;

  /* 다른 모든 요소 위에 머무는 것*/
  Z- 인덱스 : 100;

  /* 불투명도를 사용하여 숨기십시오*/
  불투명도 : 0;

  /* 번역 효과 추가*/
  변환 : Translatey (100px);

  /* 전환 효과 추가*/
  전환 : 모든 0.5 초의 용이성;
}

.showbtn {
  불투명도 : 1;
  변환 : Translatey (0);
}

이렇게하면 사용자가 페이지의 80%로 스크롤 할 때 버튼이 나타나고 그보다 높을 때 숨어 있습니다.

이것은 좋은 선택처럼 보이며 이벤트 리스너를 추가하는 것도 쉽습니다. 그러나 항상 현재 두루마리 위치를 확인하기 때문에 성능 오버 헤드가 중요 할 수 있습니다.

이 문제를 해결하는 또 다른 방법이 있습니다 ...

방법 3 : 교차 관찰자

교차로 관찰자 API는 훌륭한 솔루션입니다. 이것은 개발자가보다 최적화 된 성능을 위해 대부분의 작업을 브라우저에 넘겨 줄 수있는 상당히 새로운 브라우저 API입니다. Travis Almand는 작동 방식에 대한 철저한 설명을 제공합니다. MDN의 정의는 다음과 같습니다.

교차로 관찰자 API는 조상 요소 또는 최상위 문서 창으로 대상 요소의 교차 변화를 비동기로 관찰하는 방법을 제공합니다.

매우 영리합니다! 이것은 버튼을 대상 요소로 사용할 수 있음을 의미합니다.

 // 배치 할 요소를 선택하여 var target = document.querySelector ( "바닥기");

그런 다음 요소가 창과 교차하는 경우 (즉, 시야 필드에 들어가면) 작업을 수행하는 콜백 함수를 작성하십시오. 콜백 함수는 인수로서의 배열을 수신합니다.

 함수 콜백 (항목, 관찰자) {
  // 콜백 함수는 하나의 항목 항목 만 관찰하더라도 항목 배열을 반환합니다.
    if (EntrysInterSecting) {
      // 표시 버튼 ScrollTotOpBtn.classList.Add ( 'showbtn');
    } 또 다른 {
      // 버튼 숨기기 ScrollTotOpBtn.classList.Remove ( 'showbtn');
    }
  });
}

우리는 새로운 IntersectionObserver 인스턴스를 만들고 방금 쓴 콜백 함수를 전달해야합니다.

 Observer = New IntersectionObserver (콜백);

마지막으로, 우리는 관찰자에게 위에서 선택한 대상 요소의 교차점을 창과 함께 관찰하도록 지시합니다.

 Observer.observe (대상);

부드러운 스크롤을 달성하는 방법?

확신하는! 실제로 Chris는 2019 년 CSS를 사용하여 구현하는 방법을 보여주었습니다.

 <a href="https://www.php.cn/link/2e6d941e3bc2dbd3f122040f056b6718">페이지 상단으로 이동하십시오</a>

 html {
  스크롤-행동 : 매끄러운;
}

여기에는 Chris가 기사에서 소개 한 접근성 향상 기능과 같은 몇 가지 미묘함이 있습니다. 핵심은 CSS가 JavaScript에서 수행했던 작업을 완료 할 수있는 새로운 기능을 얻고 있다는 것입니다.

그게 다야! 매우 간단한 아이디어로 시작하겠습니다. 사용자의 스크롤 위치를 기반으로 버튼을 표시하고 숨겨서이를 향상시킵니다. 그런 다음 현재 스크롤 위치를 모니터링하는 대신 교차점 관찰자 API를 구현하여 성능을 향상시킵니다. 마지막으로 CSS를 사용하여 부드러운 스크롤을 달성하는 방법을 볼 수 있습니다. 대체로, 우리는 페이지의 다른 요소를 차단하지 않고보기 쉽고 사용하기 쉬운 상단 버튼으로 돌아갑니다.

위 내용은 눈에 띄지 않는 스크롤 투 탑 버튼을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!