티스토리 블로그 스크롤 상단 이동 버튼 추가하기

저도 님처럼 스크롤 상단 이동 버튼을 만들고 싶은데 어떻게 어디에 무엇을 넣어야 하나요?

구글 스프레드시트에 24일자로 찍힌 코멘트다. 아무래도 포럼에 남긴 질문 글을 보고 오신듯 한데, 이 방법은 각 스킨마다 다를 수 있고 정석이 아님을 미리 밝혀둔다. 그리고 설명이 부족할 수 있기에 어디까지나 참고만 하면 된다.

HTML

<a href="#" class="arrow_upward"><i class="material-icons">arrow_upward</i></a>
</s_t3>
</body>

우선 나는 위와 같은 a 태그를 </s_t3> 태그 위에 삽입하고 아래와 같이 CSS 속성을 줬다.

나는 버튼으로 만들 a 태그 클래스 이름을 arrow_upward 로 사용했는데, 버튼에 사용될 아이콘 이름이 arrow_upward 라서 그냥 별 의미 없이 줬을 뿐이다. 클래스 이름은 up이나 top 등 자신이 원하는 이름을 사용할 수 있지만 사용하는 스킨 내 클래스 명과 겹치면 안된다.

CSS

a.arrow_upward {
  display: inline;
  position: fixed;
  right: 19px;
  bottom: 19px;
  background-color: rgba(47, 45, 45, .8);	/* (rgb 색상값), 투명도 최대 1 */
  border-radius: 0px;
  width: 48px;
  font-size: 28px;
  color: #fff;
  text-align: center;
  line-height: 1;
  padding: 8px 0px 12px;			
  z-index: 164;
}

이 속성은 a 태그 중에서 arrow_upward 클래스에만 적용되는 속성으로 버튼 모양을 수정할 수 있다. 만약 위에서 a 태그의 클래스를 top 이라고 정했다면 a.top 이 되는 것이다. 이 부분은 CSS 가장 하단에 추가한다.

JavaScript

<script>
  $(document).ready(function() {
    $(window).scroll(function() {
      if ($(this).scrollTop() > 100) {
        $('.arrow_upward').fadeIn();
      } else {
        $('.arrow_upward').fadeOut();
      } });
    $('.arrow_upward').click(function() {
      $('html, body').animate({scrollTop: 0}, 400);
      return false;
    });
  });
</script>
</body>

여기서 if ($(this).scrollTop() > 100) 부터 그 아래 4줄까지는 스크롤 위치가 100 이상이면 버튼이 나타나고, 아닐 경우는 숨긴다는 뜻이며, $('html, body').animate({scrollTop: 0}, 400); 부분은 애니메이션(스크롤)이 0.4초 만에 동작한다는 뜻이다. 즉, 숫자가 작을수록 빠르게 올라가고 클수록 느리게 올라간다.

마찬가지로 스크립트에서 .arrow_upward 부분을 처음에 사용한 클래스 명으로 고쳐준 다음 위에 말한 두개의 숫자만 적당히 조절해준다. 이 스크립트는 </body> 태그 위에 삽입하면 된다.