웹 사이트에 고정 뒤로 가기 버튼을 추가하는 방법

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

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

모두.

그만큼.

방법.

에게.

그만큼.

맨 위.

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

웹 디자이너로서 이것은 누군가가 당신이 만들고 있는 사이트에 도착했을 때 하기를 바라는 마지막 일입니다. 운 좋게도 올해는 2019년이고 현대적인 웹 디자인 모범 사례는 우리에게 이 일반적인 UX 문제에 대한 솔루션을 제공했습니다. 바로 맨 위로 고정 버튼입니다.

고정된 뒤로 가기 버튼이란 무엇입니까?

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

맨 위로 이동 버튼을 추가하기 전에 고려해야 할 사항

다른 인기 있는 디자인 트렌드와 마찬가지로 사이트에 구현하기 전에 한 걸음 물러서서 다음과 같이 자문해 보시기 바랍니다. 이것을 구축하려면 어떤 백탑 버튼 가이드라인을 따라야 할까요?

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

따라야 할 가장 좋은 "모범 사례"는 귀하의 사이트와 사용자의 데이터를 기반으로 하는 것입니다!

WordPress 사이트에 고정 백투톱 버튼을 추가하는 방법

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

전문가 팁: 이 자습서가 너무 고급되지는 않지만 스테이징 사이트나 로컬 환경에서 시도해 볼 것을 권장하므로 실제 사이트에 대한 위험이 전혀 없습니다. 빠르게 설정해야 하는 경우 믿을 수 없을 정도로 사용하기 쉬운 무료 로컬 WordPress 앱인 Local을 확인하세요.

시작하자! 프로세스의 각 단계를 살펴보고 Flywheel의 프론트 엔드 엔지니어인 Josh Masen의 이 Codepen을 따를 수도 있습니다.

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

이 끈끈한 back-to-top 버튼 자습서에서는 세 가지 언어를 사용합니다.

• 버튼을 생성하기 위한 마크업용 HTML
• 버튼의 스타일을 지정하고 브랜드와 일치하도록 하는 CSS
• "작동"하고 버튼의 동작을 정의하는 JavaScript

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

<a class="top-link hide" href="" id="js-top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Back to top</span>
</a>

이것은 끈끈한 back-to-top 버튼이 될 것입니다! .top-link 라는 CSS 클래스를 추가했으며 "작동하도록" 간단한 JavaScript를 사용하고 있음을 알 수 있습니다. 또한 버튼에 인라인 SVG를 사용하고 있습니다.

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

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

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

<span class="screen-reader-text">Back to top</span>

이것은 스크린 리더로 작업하는 사용자에게 중요하며 WordPress 사이트의 접근성을 향상시킵니다. (이미지의 alt 태그와 비슷하지만 스크롤 버튼의 경우라고 생각하세요!)

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

.top-link {
  transition: all .25s ease-in-out;
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-flex;
  
 cursor: pointer;
 align-items: center;
 justify-content: center;
 margin: 0 3em 3em 0;
 border-radius: 50%;
 padding: .25em;
 width: 80px;
 height: 80px;
 background-color: #F8F8F8;

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

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

다음으로 .show 및 .show 에 대한 규칙을 볼 수 .hide . 버튼이 페이지에 나타나야 하거나 나타나지 않아야 하는 시기를 브라우저에 알리기 위해 JavaScript를 사용하여 이러한 클래스 사이를 전환합니다.

  .show {
    visibility: visible;
    opacity: 1;
  }
  
  .hide {
    visibility: hidden;
    opacity: 0;
  }

JavaScript를 시작하기 전에 CSS에 추가할 몇 줄만 더 있습니다.

svg {
 fill: #000;
 width: 24px;
 height: 12px;
}

&:hover {
 background-color: #E8E8E8;

 	svg {
	 fill: #000000;
	}
}

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

마지막으로 화면 판독기에서 "맨 위로 돌아가기"라는 텍스트를 숨기기 위해 CSS를 추가합니다.

// Text meant only for screen readers.
.screen-reader-text {
	position: absolute;
	clip-path: inset(50%);
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
	clip: rect(1px, 1px, 1px, 1px);

	&:focus {
		display: block;
		top: 5px;
		left: 5px;
		z-index: 100000; // Above WP toolbar
		clip-path: none;
		background-color: #eee;
		padding: 15px 23px 14px;
		width: auto;
		height: auto;
		text-decoration: none;
		line-height: normal;
		color: #444;
		font-size: 1em;
		clip: auto !important;
	}
}

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

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

// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');

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

const scrollFunc = () => {
  // Get the current scroll value
  let y = window.scrollY;
  
  // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
  if (y > 0) {
    scrollToTopButton.className = "top-link show";
  } else {
    scrollToTopButton.className = "top-link hide";
  }
};

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

window.addEventListener("scroll", scrollFunc);

거의 완료! 다음으로, 버튼이 실제로 사용자를 페이지의 맨 위로 다시 데려가도록 하는 함수를 정의해야 합니다. 그렇게 하기 위해 페이지 상단에서 픽셀 수에 대한 변수를 생성합니다. 해당 숫자가 0보다 크면 함수가 다시 0으로 설정하여 맨 위로 이동합니다!

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

const scrollToTop = () => {
  // Let's set a variable for the number of pixels we are from the top of the document.
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // If that number is greater than 0, we'll scroll back to 0, or the top of the document.
  // We'll also animate that scroll with requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo takes an x and a y coordinate.
    // Increase the '10' value to get a smoother/slower scroll!
    window.scrollTo(0, c - c / 10);
  }
};

마지막으로 중요한 것은 누군가가 우리의 고정된 back-to-top 버튼을 클릭할 때 해당 기능을 실행하도록 페이지에 지시해야 한다는 것입니다.

// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}

다음: 개발자가 좋아하는 19가지 WordPress 플러그인 알아보기

개발자를 위한 가장 권장되는 플러그인 목록을 보려면 이 eBook을 다운로드하십시오! 우리는 이 모든 플러그인이 사용하기 간편하고 사이트에서 성능이 너무 무겁지 않으며 완전히 신뢰할 수 있다는 것을 발견했습니다.

그게 다야! 이제 WordPress 사이트에 완벽하게 작동하고 사용자 지정 가능한 고정 back-to-top 버튼이 생깁니다. 튜토리얼 전체를 보려면 Flywheel의 프론트 엔드 엔지니어인 Josh Masen이 작성한 이 Codepen을 확인하십시오!