(티스토리) 버튼 클릭 한 번으로 내가 원하는 위치 이동하는 방법 (플로팅버튼)

저번에 플로팅 버튼 생성하는 방법에 대해 알아보았는데, 이번에는 버튼 클릭 한 번으로 내가 원하는 위치로 이동하는 방법에 대해 알아볼까 합니다. 정말 간단해서 포스팅해야 될지 고민도 했지만, 모르시는 분들을 위해서 작성하니 참고 부탁드립니다 :)

 

만약 티스토리 스킨편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요!

(티스토리) 스킨 편집 기초 상식

버튼 클릭 한 번으로 내가 원하는 위치 이동하는 방법

플로팅 버튼을 저번에 만들었으니 그것을 응용해볼까 합니다. 만약, 플로팅 버튼에 댓글이나 카테고리 등과 같은 위치를 저장하고 싶다면 어떻게 해야 할까요? 

 

먼저 플로팅 버튼은 이런식으로 만들었겠죠? (자세한 건 저번 게시글을 참고해주세요)

<!--하단 플로팅 버튼 시작-->
<div class="floating-button">
  
  <span class="move-comment">
     <a class="comment-btn"></a>
  </span>
  
</div>

그럼 이동을 원하는 요소를 찾아줘야 합니다.

 

만약 카테고리의 시작 부분이라고 예를 들어보죠. 그럼 보통 HTML에서의 위치는 이곳일 거예요. 

<div class="comments">  <!-- 이곳 -->
  <h2>댓글<span class="count">
    <s_rp_count>17</s_rp_count></span>
      </h2>
		<s_rp>

<div class="comments"> 이쪽이 댓글 시작이에요.

 

특정한 요소의 위치를 찾을때, id나 class의 이름을 전재로 찾을 수 있는데, <div class="comments">에 id 값을 추가해서 그것을 호출할 수 도 있습니다.

 

설명이 어렵다면 바로 아래에서 확인해보시죠!

<!--id 값을 start-comment로 정해줌-->
<div class="comments" id="start-comment">

아이디 값을 저렇게 start-comment로 정해줬으니, 플로팅 버튼에 저 아이디 값만 주면 되겠죠?

 

a 태그에다가 href 로 아래와 같이 수정해주면 됩니다.

<!--하단 플로팅 버튼 시작-->
<div class="floating-button">
  <span class="move-comment">
     <a class="comment-btn" href="#start-comment"></a>
  </span>
</div>
<!--하단 플로팅 버튼 끝-->

a 태그에 href로 아이디 값을 넣어줄 때는 # 키워드를 사용하시면 됩니다.

홈 또는 방명록에서 특정 버튼을 없애는 방법

만약 댓글 플로팅버튼이 홈이나 방명록에서 사라지게 하고 싶다면 아래와 같이 스크립트를 넣어주면 됩니다. 이 스크립트는 </body> 바로 위에 작성해주세요.

<script>
if ( window.location.pathname == '/' ) { //홈에서 제거
    document.write( '<style>.move-comment{display:none;}</style>' );
}
if ( window.location.pathname == '/guestbook' ) { //방명록에서 제거
    document.write( '<style>.move-comment{display:none;}</style>' );
}
</script>

이런 식으로 display:none; 해준다면 홈과 방명록 두 군데에서 사라지게 할 수 있겠네요.

 

TIP

 

 

만약 해당 기능이 제대로 작동이 안된다면, 티스토리 JQuery 설치가 되어있지 않은 스킨일 수 있으니, 구글링 해서 설치해보시기 바랍니다.

---

오늘은 이렇게 버튼 클릭 한 번으로 내가 원하는 위치 이동하는 방법에 대해 알아봤습니다. 해보시다가 막히는 부분이 있으시다면 언제든 댓글 남겨주세요

 

읽어주셔서 감사합니다🤟