맨 위로 돌아가기

최신 웹사이트의 가장 일반적인 기능 중 하나는 "맨 위로 이동"버튼을 사용하여 즉시 페이지 상단으로 스크롤할 수 있는 기능입니다. 오늘은 자바스크립트에서 어떻게 만들고 어떻게 개선하는지에 대해 조금 이야기 해보고자 합니다.


콘텐츠가 많은 페이지가 있다고 가정해 보겠습니다. 페이지 하단의 닫기</body> 태그 앞에 더미 콘텐츠가 있는 간단한 버튼을 만듭니다(나중에 스타일 지정). 또한 버튼에 대한 스크립트 파일을 만들고 버튼 바로 아래에 있는 링크를 만들어 봅시다.

<button class="button-to-top" type="button">To Top!</button>
<script src="script.js"></script>
</body>

.js 파일에서 버튼을 작동시키려면 먼저 document.querySelector 를 사용하여 버튼을 선택하고, 클릭 시 상단으로 스크롤을 트리거하는 이벤트 리스너를 추가하고, 스크롤을 수행하는 함수를 작성해야 합니다.

// Selecting a button by its class
const buttonToTop = document.querySelector('.button-to-top');

// Scrolling function
const goToTop = () => {
  scrollTo(top);
}

// Executing scrolling function on click
buttonToTop.addEventListener('click', goToTop);

scrollTo()는 Window 전역 객체의 메서드이며 페이지 절대 좌표(0,0) 또는 옵션(상단)을 포함할 수 있습니다

.

지금은 기본이 작동해야 합니다. 이 규칙을 CSS 파일에 추가하여 빠르게 스크롤을 부드럽게 만들어 보겠습니다.

html {
  scroll-behavior: smooth;
}

버튼의 스타일을 지정하는 방법은 무수히 많습니다. 저는 버튼을 둥글고 반투명하게 만들고 싶고 버튼이 나타나고 사라지는 전환 효과도 만들고 싶습니다. 또한 왼쪽 하단 모서리에 고정되어 있어야 하며 추가 클래스.hidden가 필요합니다.

.button-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 60px;
  height: 60px;

  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .9);

  color: #fff;
  background: #333;
  box-shadow: 3px 3px 2px 0 rgba(0, 0, 0, .5);
  opacity: .8;

  font-size: 25px;
  transition: all 300ms;
  cursor: pointer;
}

.button-to-top:hover {
  opacity: .95;
}

.button-to-top_hidden {
  visibility: hidden;
  opacity: 0;
}

버튼 텍스트도 '⯅' 기호로 변경했습니다. 원하는 대로 모든 것을 수정할 수 있습니다. 예를 들어 텍스트에 SVG 또는 FontAwesome을 사용할 수 있습니다. 현재 버튼은 다음과 같습니다.



스크립트로 다시 작업해 봅시다. 페이지 상단에 있을 때 버튼이 사라지고 조금 아래로 스크롤하면 표시되는 버튼이 필요합니다. 이를 위해 이번에는 브라우저 창 자체에 JavaScript로 또 다른 이벤트 리스너를 추가해야 합니다. 따라서 스크롤이 발생하고 문서 상단에서 200픽셀 아래에 있을 때 버튼이 표시되어야 합니다. 기본적으로 버튼에 .hidden 클래스를 추가하여 이를 수행하고 있으며 JS에서 제거할 것입니다.

<button class="button-to-top button-to-top_hidden" type="button">
⯅
</button>

const buttonToTop = document.querySelector('.button-to-top');

const goToTop = () => {
  scrollTo(top);
};

const showToTopButton = () => {
  if (
    document.body.scrollTop > 200 ||
    document.documentElement.scrollTop > 200
  ) {
    buttonToTop.classList.remove('button-to-top_hidden');
  } else {
    buttonToTop.classList.add('button-to-top_hidden');
  }
};

buttonToTop.addEventListener('click', goToTop);

window.addEventListener('scroll', showToTopButton);

그리고 그것은 작동합니다!
하지만 이제 최적화에 대해 조금 이야기해 보겠습니다.

다음과 같이 console.log 함수에 약간의 showToTopButton를 추가해 보겠습니다.

const showToTopButton = () => {
  console.log('scrolling');
  // ...

그런 다음 페이지를 연 다음 잠시 스크롤을 시도하고 개발자 콘솔을 보면 다음과 같은 내용이 표시됩니다.



그리고 그것은 많은 함수 호출입니다! 여기서 중요하지는 않지만 최적화된 동작은 아닙니다. 고맙게도 이에 대한 해결책이 있으며 여기에서 우리의 도우미는 Lodash library 입니다.

다양한 방법으로 프로젝트에 추가할 수 있습니다(다운로드 또는 npm 사용). CDN 링크를 사용하여 HTML 파일의 스크립트 앞에 배치하겠습니다.

<button class="button-to-top button-to-top_hidden" type="button">
⯅
</button>
<script
  src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"> 
</script>
<script src="totop.js"></script>

Lodash에는 스로틀과 디바운스라는 두 가지 모듈이 있습니다. 그들이 하는 일은 지정된 시간에 한 번만 실행되는 함수를 만드는 것입니다. 스로틀부터 시작하겠습니다.

window.addEventListener('scroll', _.throttle(() =>
showToTopButton(), 200));

"_"는 모든 Lodash 메서드를 보유하는 개체입니다. 지금은 showToTopButton 함수가 200ms에 한 번만 호출되도록 구성했습니다. 콘솔을 봅시다.



확실히 낫습니다! Debounce는 비슷한 방식으로 작동하지만(자세한 내용은 공식 문서를 참조할 수 있음), 우리의 경우 스크롤을 중지한 후 200ms 후에만 함수가 실행됩니다.

window.addEventListener('scroll', _.debounce(() =>
showToTopButton(), 200));

개인적으로 이 경우에는 디바운스를 선호합니다.


그리고 그것이 제가 오늘 공유하고 싶었던 전부입니다!
읽어 주셔서 감사합니다! 게시물의 피드백과 공유는 매우 감사합니다! Twitter @ cat__logic에서 저를 찾을 수 있습니다.

Benjamin Davies의 배경