[ 티스토리 코드 ] 현 블로그에 직접 적용한 상단/하단 이동 버튼 코드 정리

---

1️⃣ 버튼 HTML 코드 넣기

</body> 바로 위에 아래 코드를 넣어줍니다.

<!-- 상단/하단 이동 스크롤 버튼 -->
<button id="goTopBtn" title="맨 위로" style="display:none;">↑</button>
<button id="goBottomBtn" title="맨 아래로" style="display:none;">↓</button>

---

2️⃣ JavaScript 기능 코드 삽입

<script>
  // 상단 이동 버튼과 하단 이동 버튼 요소를 가져옵니다.
  const goTopBtn = document.getElementById("goTopBtn");
  const goBottomBtn = document.getElementById("goBottomBtn");

  // 사용자가 스크롤을 할 때마다 실행되는 함수입니다.
  window.onscroll = function() {
  	// 현재 스크롤 위치 (위쪽 기준)
    const scrollTop = document.documentElement.scrollTop;
    // 전체 문서의 높이
    const scrollHeight = document.documentElement.scrollHeight;
    // 브라우저 창에 보이는 영역의 높이
    const clientHeight = document.documentElement.clientHeight;
	
    // 스크롤이 일정 높이(300px) 이상 내려갔을 때 버튼을 표시합니다.
    if (scrollTop > 300) {
      goTopBtn.style.display = "block";		// 상단 이동 버튼 보이기
      goBottomBtn.style.display = "block";	// 하단 이동 버튼 보이기
    } else {
      // 그 이하일 경우 버튼을 숨깁니다.
      goTopBtn.style.display = "none";
      goBottomBtn.style.display = "none";
    }
  };

  // 상단 이동 버튼을 클릭했을 때 실행됩니다.
  goTopBtn.onclick = function() {
  	// 페이지를 맨 위로 부드럽게 스크롤합니다.
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };

  // 하단 이동 버튼을 클릭했을 때 실행됩니다.
  goBottomBtn.onclick = function () {
  	// 페이지를 문서의 끝까지 부드럽게 스크롤합니다.
    window.scrollTo({
      top: document.documentElement.scrollHeight,
      behavior: "smooth"
    });
  };
</script>

---

3️⃣ CSS 스타일 추가

/* 상단/하단 이동 스크롤 */
#goTopBtn {
  position: fixed;			/* 화면에 고정되어 스크롤해도 항상 보임 */
  bottom: 50px;				/* 화면 아래에서 50px 위에 위치 */
  right: 20px;				/* 화면 오른쪽에서 20px 안쪽에 위치 */
  z-index: 999;				/* 다른 요소 위에 보이도록 레이어 우선순위 높임 */
  border: none;
  outline: none;
  background-color: #7aa7ff;
  color: white;
  cursor: pointer;
  padding: 5px 10px;
  font-size: 18px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  border-radius: 6px;
  transition: opacity 0.3s;
  display: block !important;	/* JavaScript로 display:none 됐다가 다시 보이게 하기 위함 */
  font-weight: 700;
}
#goTopBtn:hover {
  background-color: #558de8;
}
/* 모바일 화면 대응 (화면 너비 768px 이하일 때 위치와 크기 조정) */
@media (max-width: 768px) {
  #goTopBtn {
    bottom: 20px;
    right: 15px;
    padding: 10px;
  }
}

#goBottomBtn {
  position: fixed;			/* 고정 위치로 설정 */
  bottom: 15px;  			/* goTopBtn보다 더 아래에 위치시킴 */
  right: 20px;				/* 오른쪽 정렬 */
  z-index: 999;				/* 다른 요소 위에 표시 */
  border: none;
  outline: none;
  background-color: #7aa7ff;
  color: white;
  cursor: pointer;
  padding: 5px 10px;
  font-size: 18px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  border-radius: 6px;
  transition: opacity 0.3s;
  display: block !important;
  font-weight: 700;
}
#goBottomBtn:hover {
  background-color: #558de8;
}
/* 모바일 화면 대응 */
@media (max-width: 768px) {
  #goBottomBtn {
    bottom: 10px;
    right: 15px;
    padding: 10px;
  }
}
#goTopBtn,
#goBottomBtn {
  font-family: "Pretendard Variable" !important;
}
/* 상단/하단 이동 스크롤 (끝)*/