웹사이트에 끈끈한 Back-to-Top 버튼을 추가하는 방법

게시 됨: 2023-02-12

우리는 모두 거기에 있었습니다. 환상적인 온라인 가이드를 발견하고 맨 아래까지 스크롤한 다음 "와, 이 사이트에서 제공하는 다른 기능을 보고 싶습니다!"라고 생각합니다.

그러나 스크롤해야 합니다.

모두.

그만큼.

방법.

에게.

그만큼.

맨 위.

그리고 당신은 생각합니다… "음, 신경쓰지마." 그리고 페이지를 닫습니다.

웹 디자이너로서 이것은 누군가가 당신이 만들고 있는 사이트에 도착했을 때 하기를 바라는 마지막 일입니다. 운 좋게도 최신 웹 디자인 모범 사례는 이 일반적인 UX 문제인 끈끈한 연속 버튼에 대한 해결책을 제공했습니다.

끈적끈적한 Back-to-Top 버튼이란 무엇입니까?

맨 위로 스크롤 버튼 또는 맨 위로 이동 이미지라고도 하는 고정 맨 위로 이동 버튼은 사용자가 보고 있는 웹 페이지의 맨 위로 돌아가는 데 도움이 되는 유용한 탐색 요소입니다. 일반적인 UI 패턴은 이 버튼을 화면의 오른쪽 하단 모서리에 배치하여 고정 위치를 통해 "고정"되도록 하여 사용자가 페이지를 아래로 스크롤할 때 항상 액세스할 수 있도록 하는 것입니다.

Back-to-Top 버튼을 추가하기 전에 고려해야 할 사항

인기 있는 디자인 트렌드와 마찬가지로 사이트에 구현하기 전에 한 걸음 뒤로 물러서서 자문해 보시기 바랍니다. 이것을 만들려면 어떤 백톱 버튼 지침을 따라야 합니까?

다음은 맨 위로 스크롤 버튼을 만들기 전에 답해야 할 몇 가지 질문입니다.

  • 어디에 배치될까요?
  • 얼마나 커야(또는 작아야) 합니까?
  • 브랜드를 유지하려면 어떤 디자인 패턴을 따라야 합니까? (색상, 글꼴, 아이콘 등을 생각하십시오.)
  • 사이드바의 정보와 같은 중요한 사이트 콘텐츠를 가릴 위험이 있습니까?
  • 모바일 장치에서는 어떻게 됩니까? 반응할까요?
  • 실제로 필요합니까?*

*참고: 오늘날 사용자는 페이지에서 아래로 스크롤(그리고 다시 위로!)하도록 조건이 지정되어 있어 위로 가기 버튼이 "필요"하지 않다고 주장할 수 있습니다. 내 조언: 테스트해 보세요! 클릭 시 Google Analytics 이벤트를 추가하거나 Hotjar와 같은 히트맵 도구를 사용하여 사이트 방문자가 페이지에 어떻게 참여하는지 확인하십시오.

따라야 할 최상의 "모범 사례"는 자신의 사이트와 사용자의 데이터를 기반으로 하는 것입니다!

WordPress 사이트에 끈적끈적한 위로 가기 버튼을 추가하는 방법

이 튜토리얼에서는 Layout에서 사용하는 정확한 back-to-top 버튼을 추가하는 방법을 보여드리겠습니다! 유일한 차이점은 오른쪽 하단 모서리 대신 화면 상단의 고정 헤더에 배치했다는 것입니다. (하지만 같은 개념이니 걱정마세요!)

전문가 팁: 이 자습서는 그다지 고급 수준은 아니지만 스테이징 사이트나 로컬 환경에서 시도해 보는 것이 좋습니다. 그러면 라이브 사이트에 전혀 위험이 없습니다. 빠르게 설정해야 하는 경우 사용하기 매우 쉬운 무료 로컬 WordPress 앱인 Local을 확인하세요.

또는 끈적끈적한 맨 위로 버튼을 추가하는 방법에 대한 이 비디오 자습서를 확인하십시오!

CodePen에서 Josh Lawler(@joshuamasen)가 작성한 Pen ES6 Scroll-to-top 버튼을 참조하십시오.

이 끈끈한 연속 버튼 자습서에서는 세 가지 언어를 사용합니다.

  • 버튼을 만들기 위한 마크업용 HTML
  • 버튼의 스타일을 지정하고 브랜드와 일치시키는 CSS
  • "작동"하게 만들고 버튼의 동작을 정의하는 JavaScript

HTML에서 다음 줄을 찾을 수 있습니다.

 <a class="top-link hide" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><경로 d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">맨 위로</span>
</a>

이것은 당신의 끈끈한 back-to-top 버튼이 될 것입니다! .top-link 라는 CSS 클래스를 추가하고 간단한 JavaScript를 사용하여 "작동하게" 하는 것을 볼 수 있습니다. 또한 버튼에 인라인 SVG를 사용하고 있습니다.

SVG 외에 이미지 파일이나 글꼴 아이콘을 사용하여 버튼을 만들 수도 있습니다. 그러나 다음과 같은 이유로 SVG 방법을 선호합니다.

  1. 래스터 이미지처럼 다른 화면 크기에서 픽셀화되지 않습니다.
  2. SVG는 모든 브라우저에서 보편적으로 지원됩니다. (예, 사용자 경험!)
  3. CSS로 스타일을 지정하기가 쉽기 때문에 정말 쉽게 모든 것을 변경할 수 있습니다.
  4. 한 줄의 코드만 있으면 가벼워지고 사이트 성능이 향상됩니다.

HTML에서 마지막으로 찾을 수 있는 정말 중요한 부분은 다음 줄입니다.

 <span class="screen-reader-text">맨 위로</span>

이는 화면 판독기로 작업하는 사용자에게 매우 중요하며 WordPress 사이트의 접근성을 향상시킵니다. (이미지에 대한 alt 태그처럼 생각하되 맨 위로 스크롤 버튼에 대한 것입니다!)

이제 해당 CSS 클래스인 .top-link 에 대해 자세히 알아보겠습니다. 우리는 이것을 실제로 버튼의 스타일을 지정하는 데 사용하고 있으며 여기에서 버튼의 크기, 주변에 패딩이 얼마나 있어야 하는지, 색상 등과 같은 품질을 정의할 수 있습니다.

 .탑링크 {
  전환: 모두 .25s ease-in-out;
  위치: 고정;
  하단: 0;
  오른쪽: 0;
  디스플레이: inline-flex;
  
 커서: 포인터;
 정렬 항목: 중앙;
 justify-content: 센터;
 마진: 0 3em 3em 0;
 경계 반경: 50%;
 패딩: .25em;
 폭: 80px;
 높이: 80px;
 배경색: #F8F8F8;

참고: CSS를 조금 더 빠르게 작성하기 위해 Sass(스타일시트 언어)를 사용하고 있습니다. 여기에서 이 전처리기에 대해 자세히 알아보세요.

이 스니펫의 몇 ​​가지 중요한 부분: transition: all .25s ease-in-out ; 버튼이 화면에 얼마나 "빠르게" 나타나거나 사라지는지 제어합니다. position: fixed ; 버튼을 원하는 위치에 "고정"시키는 것입니다.

다음으로 .show 및 .hide 에 대한 규칙이 표시됩니다. 버튼이 페이지에 표시되어야 하는지(또는 표시되지 않아야 하는지) 브라우저에 알리기 위해 JavaScript를 사용하여 이러한 클래스 사이를 전환합니다.

 .보여주다 {
    가시성: 가시성;
    불투명도: 1;
  }
  
  .숨다 {
    가시성: 숨김;
    불투명도: 0;
  }

JavaScript로 이동하기 전에 CSS에 추가할 몇 줄만 더 있습니다.

 SVG {
 채우기: #000;
 너비: 24px;
 높이: 12px;
}
&:호버 {
 배경색: #E8E8E8;
 	SVG {
	 채우기: #000000;
	}
}

이러한 클래스는 화살표 자체에 대한 SVG 이미지의 스타일을 지정하고 사용자가 버튼 위로 마우스를 가져갈 때 버튼을 표시하는 방법을 브라우저에 알려줍니다.

마지막으로, 스크린 리더를 위해 "back to top"이라는 텍스트를 숨기기 위해 CSS를 추가할 것입니다.

 // 스크린 리더 전용 텍스트입니다.
.스크린 리더 텍스트 {
	위치: 절대;
	클립 경로: 삽입(50%);
	여백: -1px;
	테두리: 0;
	패딩: 0;
	폭: 1px;
	높이: 1px;
	오버플로: 숨김;
	줄바꿈: 일반 !important;
	클립: rect(1px, 1px, 1px, 1px);
	&:집중하다 {
		디스플레이: 블록;
		상단: 5px;
		왼쪽: 5px;
		z-지수: 100000; // WP 툴바 위
		클립 경로: 없음;
		배경색: #eee;
		패딩: 15px 23px 14px;
		너비: 자동;
		높이: 자동;
		텍스트 장식: 없음;
		선 높이: 정상;
		색상: #444;
		글꼴 크기: 1em;
		클립: 자동 !중요;
	}
}

이제 자바스크립트로 넘어갑니다! 코드를 가볍고 빠르게 로드하는 데 도움이 되는 jQuery를 로드하지 않고 이 작업을 수행할 것입니다.

첫 번째 변수는 브라우저가 버튼을 찾는 데 도움이 됩니다.

 // 버튼 요소에 대한 변수를 설정합니다.
const scrollToTopButton = document.getElementById('js-top');

다음으로 사용자가 초기 창의 높이 이상으로 스크롤하면 맨 위로 스크롤 버튼을 표시하는 함수를 만듭니다.

 const scrollFunc = () => {
  // 현재 스크롤 값 가져오기
  let y = window.scrollY;
  
  // 스크롤 값이 창 높이보다 크면 맨 위로 스크롤 버튼에 클래스를 추가하여 표시해 봅시다!
  만약 (y > 0) {
    scrollToTopButton.className = "상단 링크 표시";
  } 또 다른 {
    scrollToTopButton.className = "상단 링크 숨기기";
  }
};

또한 사용자가 스크롤하는 것을 감시할 이벤트 리스너를 추가할 것입니다(따라서 사용자가 페이지의 어디에 있는지 알 수 있습니다).

 window.addEventListener("스크롤", scrollFunc);

거의 완료되었습니다! 다음으로 버튼이 실제로 사용자를 페이지 상단으로 다시 이동하게 만드는 기능을 정의해야 합니다. 이를 위해 페이지 상단의 픽셀 수에 대한 변수를 생성합니다. 해당 숫자가 0보다 크면 함수는 다시 0으로 설정하여 맨 위로 이동합니다!

여기에 약간의 애니메이션도 추가하여 점프가 너무 갑작스럽지 않도록 합니다.

 const scrollToTop = () => {
  // 문서 상단에서 픽셀 수에 대한 변수를 설정해 보겠습니다.
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // 해당 숫자가 0보다 크면 0 또는 문서의 맨 위로 스크롤합니다.
  // 또한 requestAnimationFrame을 사용하여 해당 스크롤에 애니메이션을 적용합니다.
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  만약 (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo는 x 및 y 좌표를 사용합니다.
    // 더 부드럽게/느리게 스크롤하려면 '10' 값을 늘리십시오!
    window.scrollTo(0, c - c / 10);
  }
};

마지막으로, 우리는 누군가 우리의 끈끈한 back-to-top 버튼을 클릭할 때 해당 기능을 실행하도록 페이지에 지시하기만 하면 됩니다.

 // 버튼을 클릭하면 위의 ScrolltoTop 함수를 실행합니다!
scrollToTopButton.onclick = 함수(e) {
  e.preventDefault();
  맨위로 스크롤();
}

그게 다야! 이제 WordPress 사이트에 완벽하게 작동하고 사용자 정의할 수 있는 끈끈한 연속 버튼이 있습니다.