친효애드온 : 제이쿼리를 활용한 티스토리에 맨 위로 올라가는 TOP버튼 만들기
친효스킨에는 현재 TOP 버튼이 적용되어 있습니다. 하지만 일부 스킨에서는 TOP 버튼이 없을 수 있습니다. 만약 여러분들께서 사용하시는 반응형 스킨에 위로 올라가는 TOP 버튼이 없다면 이 애드온을 통해서 만드실 수 있습니다.
적용하시면 최종적으로 이런 형태의 버튼을 확인하실 수 있습니다. 티스토리 스킨의 오른쪽 하단에 생성되며 가장 맨 위로 스크롤이 되어 있는 경우에는 버튼이 자동으로 사라집니다. 그리고 스크롤을 하단으로 조금만 내려보시면 다니 나타나는것을 확인하실 수 있습니다. 누르면 빠르게 다시 제일 위로 올라갑니다. 이제 세팅 방법을 살펴보겠습니다.
jQuery 세팅하기
먼저 자바스크립트의 한 종류인 제이쿼리를 세팅해야 합니다. 하나씩 따라해 주시기 바랍니다. 어렵지 않습니다. 먼저 아래의 스크립트 링크 코드를 <head> 안쪽에 그대로 붙여넣기를 해줍니다. 첨부파일로도 올려놓겠습니다.
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
친효애드온_TOP버튼_스크립트주소.txt이제 이 스크립트 코드를 이렇게 붙여넣기 해주세요.
위에서 설명드렸듯, 자신의 티스토리 관리자 모드에서 왼쪽에 있는 꾸미기 > 스킨편집으로 가셔서 오른쪽 상단에 있는 HTML 편집으로 들어가시고 HTML 카테고리에서 <head> 안쪽에 빈 줄을 만들어서 붙여넣기 해주시면 됩니다. 통상적으로 <link rel= 어쩌구 저쩌구> 의 아래에 공간을 만들어 붙여넣기를 해주시면 됩니다. 해당 스크립트 주소는 중복이 되어도 상관은 없습니다.
다음은 아래의 첨부파일을 다운받아서 그대로 복사 후 마찬가지로 <head> 안쪽에 붙여넣기를 해주세요. 보통 <head> 안쪽에 <script> 가 들어가는데, 이 그룹을 찾으셔서 위 혹은 아래에 공간을 확보하시고 그대로 붙여넣기를 하시면 됩니다.
이렇게 넣으시면 됩니다. 참고로 숫자 100은 스크롤 되는 높이에 대한 설정으로 세로 100px 을 기준으로 TOP 버튼이 나타나고 사라진다는 뜻 입니다. 500은 위로 올라가는 속도 입니다. 수치가 낮을수록 빨리 올라갑니다.
HTML 세팅하기
이제 버튼의 뼈대를 세팅합니다. 다음의 코드를 </s_t3> 바로 위에 붙여넣기를 해주시면 됩니다.
<div id="topBtn">TOP</div>
이렇게 붙여넣기 해주시면 됩니다.
CSS 세팅하기
이제 마지막 과정 입니다. 아래의 첨부파일을 다운 받으시고 모두 복사해 주세요.
그리고 CSS 탭으로 넘어오셔서 빈 공간을 만드시고 그대로 붙여넣기 해주시면 됩니다. 이제 모두 저장을 하시고 한번 블로그를 확인해 보시기 바랍니다. 스크롤을 조금 내리면 오른쪽 하단에 TOP 버튼이 생성된것을 확인하실 수 있으실 겁니다. 버튼의 색상을 변경하고 싶으시다면 위의 첨부파일 안에 주석으로 표시를 해 두었으니 원하시는 색으로 변경하시면 됩니다. 끝.
"친절한효자손 취미생활" 을 검색!
