티스토리 블로그에 "맨 위로 가기 버튼" 장착하기 (모든 스킨 동일)

블로그 또는 많은 사이트를 방문해서 사용하다 보면 자주 눈에 띄는 것 중에 하나가 바로 "맨 위로 가기"라는 버는튼이죠.

 

포스팅을 하다보면  내용이 길어져 다시 위로올라오기가 불편 할 수 있는 경우 유용하게 사용할 수 있는 기능을 가지고 있는 것이 바로 "맨 위로 가기" 버튼이죠.

 

지금 이 버튼을 찾을 정도의 블로거라면 굳이다른 잡다한 설명은 생략해도 될 거라는 가정하에 아래 태그를 복사해서 붙여 넣기 하면 됩니다.

1. 먼저 티스토리 관리 페이지 > 꾸미기 > 스킨편집 > html 편집 > HTML 페이지 에서

아래 </body> 바로 위에 아래 코드를 복사 > 붙여 넣기 합니다.

 

<div id="toTop">▲ TOP</div>

<script>
  window.addEventListener('scroll', function () {
    var topBtn = document.getElementById('toTop');
    if (window.scrollY > 300) {
      topBtn.style.display = 'block';
    } else {
      topBtn.style.display = 'none';
    }
  });
  document.getElementById('toTop').addEventListener('click', function () {
    window.scrollTo({ top: 0, behavior: 'smooth' });
  });
</script>

 

 

 

2.  HTML 바로 우측에 CSS 페이지를 열고 아레 태그를 복사하여 페이지 제일 아래에 붙여 넣기합니다.

 

#toTop {
  position: fixed;
  bottom: 40px;
  right: 30px;
  background-color: #333;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
  display: none;
  z-index: 1000;
  opacity: 0.7;
}
#toTop:hover {
  background-color: #555;
  opacity: 1;
}

 

이  두 곳에 붙여 넣기 후 우측 상단 "적용"을  눌러 마칩니다.

 

그리고 게시글을 열고 스크롤바를  내리다 보면 우측 하단에  ▲TOP  버튼이 보입니다.