친절한효자손 취미생활

기존 TOP 버튼이 딱 위로 올라가기 버튼 한 개만 존재하는 것이었다면 이번 마크2 버전은 좀 더 다양한 버튼을 넣어놓은 버전이라고 할 수 있습니다. 모바일용 이라기 보다는 주로 사용되는 해상도는 아마 데스크탑에서 많이 사용되지 않을까 싶습니다. 친효스킨을 기준으로 작업하였지만 다른 스킨에서도 정상 동작하도록 하였습니다.


jQuery 세팅

먼저 제이쿼리 스크립트부터 세팅하도록 합니다. 자신의 티스토리 스킨 편집 모드로 들어가서 HTML의 <head> 안에 아래의 첨부파일 내용을 모두 복사해서 빈 공간 확보 후 붙여넣기를 진행합니다.


친효애드온 - TOP버튼 마크2 jQuery.txt


메모장을 열어보시면 다음과 같은 내용이 들어 있습니다.


<script>

    $(document).ready(function() {

        $(window).scroll(function() {

            if ($(this).scrollTop() > 100) {

                $('#topBtn').fadeIn();

            } else {

                $('#topBtn').fadeOut();

            }

        });


        $(".rgyTop").click(function() {

            $('html, body').animate({

                scrollTop: 0

            }, 500);

            return false;

        });

    });

</script>


파란색 숫자는 버튼이 나타나는 최소 높이를 나타냅니다. 숫자가 커질수록 버튼이 나타나도록 아래로 스크롤하는 가로 길이가 길어집니다. 빨간색 숫자는 맨위로 가는 버튼을 눌렀을 때 이동되는 속도 입니다. 숫자가 커질수록 천천히 스크롤되며 올라갑니다. 참고하시기 바랍니다.




보시는 것 처럼 이렇게 head 안쪽에 배치하면 됩니다. 잘 모르시겠다면 </head> 전에 붙여넣기 하시면 됩니다.


HTML 세팅 - 폰트어썸 CDN 링크 추가

티스토리 스킨 편집으로 들어갑니다. HTML의 <head> 안쪽에 아래의 링크를 그대로 붙여넣기 합니다. (title 아래에 붙여넣기 진행을 추천함) 방법은 위에 설명한것과 동일합니다. 첨부파일로도 올려놓겠습니다.


폰트어썸 CDN 링크.txt


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">


HTML 세팅 - 카테고리 링크 추가

다음은 카테고리 버튼을 눌렀을 때 카테고리로 바로 이동되도록 만드는 기능을 추가할 것 입니다. 먼저 여러분들의 스킨에 있는 카테고리 모듈을 찾아야 합니다. 티스토리의 사이드바 모듈은 보통 <s_sidebar_element> 로 감싸져 있습니다. 그 중에서도 카테고리를 찾아야 합니다. 영어로 되어 있기도 하고 한글로 되어 있기도 합니다. 친효스킨의 경우는 한글로 주석 처리를 해두었습니다. 먼저 아래의 첨부파일을 다운로드 받습니다.


친효애드온 - TOP버튼 마크2 카테고리.txt


메모장을 열어서 모두 복사하시고 아래의 위치에 그대로 붙여넣기 해주시면 됩니다.




파란색이 기존에 있는 카테고리 모듈이며 바로 위의 빨간색 태그들이 첨부파일 내용 입니다. 반드시 카테고리 모듈 바로 위에 붙여넣기를 해주셔야 합니다. 이 위치로 바로 이동되게 하기 위함 입니다.




카테고리 바로가기 모듈이 정상적으로 등록되면 이렇게 사이드바에 있는 모듈 목록에 표시가 됩니다. 이것을 카테고리 바로 위로 이동시켜 주시면 됩니다.


HTML 세팅 - 버튼 추가

이제 뼈대가 되는 HTML을 넣어보도록 하겠습니다. 마찬가지로 아래의 첨부파일을 먼저 받아주시기 바랍니다.


친효애드온 - TOP버튼 마크2 HTML.txt


첨부파일 안의 태그들을 모두 복사한다음 스킨의 HTML 카테고리에 있는 </s_t3> 바로 위에 붙여넣기를 해주시면 됩니다.




이렇게 해주시면 됩니다. 그리고 저장 합니다.


CSS 세팅

이제 마지막으로 스타일을 구성하는 CSS 세팅만 남았습니다. 마찬가지로 먼저 첨부파일을 다운로드 받아주시기 바랍니다.


친효애드온 - TOP버튼 마크2 CSS.txt


첨부파일의 모든 내용을 복사하시고 스킨의 CSS로 이동하신다음 빈 공간을 확보하시고 그대로 붙여넣기를 하시고 저장을 눌러주시면 됩니다.




이렇게 빈 공간을 확보하시고 그대로 붙여넣기를 해주시면 됩니다. 이제 모든 세팅이 끝났습니다. 메인 화면으로 가셔서 한번 스크롤을 내려 보시기 바랍니다. 버튼이 정상적으로 나타나는지 확인해 주세요.




정상적으로 세팅이 완료 되었다면 아마 이런 버튼이 나타나게 될 것입니다. 만약 나타나지 않으면 다시 처음부터 차근차근 진행해 보시기 바랍니다. 모바일 해상도에서는 버튼의 크기가 70%로 작아집니다. 끝.





알리익스프레스 할인

이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유합시다

facebook twitter googleplus kakaostory naver

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

또한 비밀댓글의 경우는 질문 내용을 공개하고 답글을 해드리고 있으니 참고하시기 바랍니다.

  1. Favicon of https://kepper.tistory.com kepper 2019.10.02 00:05 신고

    기존에 올려주신 TOP 버튼 잘 쓰고 있습니다. 좀더 편하게 바꿔보려고 스킨 편집에 들어가봤는데 티스토리 제공 스킨인 Poster에는 <s_sidebar_element> 태그가 없네요. 사이드바 편집이 막혀 있어 혹시나 했는데 위의 방법으로 편집하기는 어렵나 봅니다.

    • Favicon of https://rgy0409.tistory.com 친절한효자손 2019.10.02 00:36 신고

      안녕하세요, 카테고리를 구성하는 태그 바로 위에다가 심어놓기만 하면 될 겁니다. 한번 해보세요.

    • Favicon of https://kepper.tistory.com kepper 2019.10.02 23:01 신고

      카테고리 문제를 고민하다 그냥 빼버리는 것으로 해결했습니다. 글쓰기 버튼은 새로운 글쓰기 링크로 대체하고 버튼 배경색 바꾸니 제법 그럴듯해보이네요. 감사합니다.