티스토리에 상단 스크롤 해주는 버튼 만들기

정보

티스토리에 상단 스크롤 해주는 버튼 만들기

운클라우드 2021. 2. 13. 20:06

티스토리에는 스크롤을 최상단으로 이동해주는 버튼이 없습니다.

그래서 이 버튼을 직접 만들어야 하는데, 이 버튼을 만드는 방법을 알려드리겠습니다.

티스토리에서 기본적으로 상단 스크롤 버튼을 제공하지 않습니다.

그래서 설정으로 들어가서 직접 HTML, JAVASCRIPT 코드를 입력해야 합니다.

따라 하신다면 쉽게 추가할 수 있습니다.

같이 따라 해 보시죠. 🤗

728x90

1. 블로그 HTML 편집기 열기

블로그 관리 페이지로 들어가면 꾸미기 카테고리에 "스킨 편집"이라는 메뉴가 있습니다.

이것을 클릭해서 이동합니다.

스킨 편집 페이지로 오시면 오른쪽 상단에 "html 편집"이라는 버튼이 나옵니다.

이 버튼을 클릭합니다.

2. HTML로 버튼 추가하기

HTML 편집기 맨 아래로 스크롤을 쭉 내리면 다음과 같은 내용이 나옵니다.

맨 아래로 스크롤 하면 "</body>" 태그를 찾을 수 있습니다.

</body> 태그 위에 다음 코드를 추가합니다.

<a href="#" id="top-btn" title="Top" style="display: none; position: fixed; bottom: 10px; right: 10px; z-index: 99999999;">
    <img src="./images/top.png" />
</a>
<script type="text/javascript">
    $(function () {
        $("#top-btn").hide();
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $("#top-btn").fadeIn();
            }
            else {
                $("#top-btn").fadeOut();
            }
        });
    });
</script>