[JQuery] 티스토리 또는 웹사이트에 상단 하단 스크롤 이동 버튼 추가 / JQuery, js, scrollTop, animate, 스크롤 감지

안녕하세요.

 

오늘은 웹 화면에서 상단 또는 하단으로 이동할 수 있는 버튼을 만들어보겠습니다.

 

웹 사이트의 스크롤이 길어질 때 이동 버튼이 있으면 편리하죠.

 

제 블로그의 왼쪽에 있는 상하 버튼을 기준으로 설명드리겠습니다.

 

 

필요한 것

 

1. 버튼 이미지

 

https://www.flaticon.com/

저는 이 사이트에서 구했습니다.

아이콘 크기는 다운받으셔서 자신이 원하는 크기로 알맞게 조정하셔야됩니다. 

 

 

2. javascript 파일

 

구현할 내용은 크게 2가지 입니다. 소스도 간단하고 짧습니다.

 

 

1. 스크롤 위치를 감지하여 버튼이 사라지고 나타나는 효과

2. 클릭 시 부드럽게 최상단 이동, 최하단 이동

 

$(document).ready(function() {

    /******* 스크롤 감지하여 버튼이 나타나고 사라지게 합니다 ******/
    $(window).scroll(function() {

        /* 
            현재 스크롤이 최상단으로부터 조금 내려왔을 경우
            UP 버튼을 나타나게 합니다.
        */
        if($(this).scrollTop() > 100) 
        { 
            $('#upBtn').fadeIn();
        } 

        /* 
            현재 스크롤이 최상단 기준으로 올라왔을 경우
            UP 버튼을 사라지게 합니다.
        */
        else 
        { 
            $('#upBtn').fadeOut();
        }

        /* 
            현재 스크롤이 최하단으로부터 조금 올라왔을 경우
            DOWN 버튼을 나타나게 합니다.
        */
        if($(this).scrollTop() < ($(document).height()-$(window).height()-100)) 
        {
            $('#downBtn').fadeIn();
        } 
        
        /* 
            현재 스크롤이 최하단 기준으로 내려왔을 경우
            DOWN 버튼을 사라지게 합니다.
        */
        else 
        {
            $('#downBtn').fadeOut();
        }

    });
    /*****************************************************************/


    /* 
        UP버튼 클릭 시 자연스럽게 최상단으로 올라가는 효과를 줍니다.
        400 -> 0.4초 
    */
    $('#upBtn').click(function() {
        $('html, body').animate({scrollTop: 0}, 400);
        return false;
    });

    /* 
        DOWN버튼 클릭 시 자연스럽게 최하단으로 내려가는 효과를 줍니다. 
    */
    $('#downBtn').click(function() {
        $('html, body').animate({scrollTop: $(document).height()}, 400);
        return false;
    });

});

1번 효과가 필요없다 하시는 분들은 2번만 참고하시면 됩니다.

 

1번 효과는 제 블로그 좌측에 있는 상/하단 버튼 효과를 참고하시면 됩니다.

 

 

- 1번 효과

 

1번 효과는 버튼이 어디서 나타나고 어디서 사라질지 기준점을 정해야합니다.

 

우선 현재 웹페이지에서 F12 - Console 메뉴로 들어가셔서

$(window).scrollTop() 또는 $(this).scrollTop()를 입력하시면 현재 스크롤 위치 값이 나옵니다.

이 스크롤 값을 이용해서 현재 스크롤 위치를 판단합니다.

 

 

UP 버튼

 

저는 UP버튼이 최상단으로부터 100이하 만큼 떨어졌을 경우 버튼을 안보이게 하고 

그 이후부턴 쭉 나타나도록 했습니다. 

 

최상단으로부터 100 떨어진 값이 어느정돈지 궁금하시면 Console 메뉴에서

$(window).scrollTop(100)을 입력하시면 그 위치로 이동하게 됩니다.

 

따라서

if($(this).scrollTop() > 100) 해당 조건일 경우 버튼을 fadeIn 시키고

else 조건일 경우 fadeOut 시키면 됩니다.

 

 

DOWN 버튼

 

최상단 값은 어느 페이지나 똑같지만 최하단 값은 페이지마다 스크롤의 값이 다릅니다.

따라서 최하단의 값을 동적으로 얻을 수 있어야 합니다.

 

최하단의 스크롤 값을 확인하려면 해당 페이지의 height를 알아야 합니다.

$(document).height()를 통해 확인합니다.

 

하지만!!

페이지의 높이를 그냥 최하단 스크롤 값으로 사용하면 제대로 동작하지 않습니다.

 

그럼 어떻게 하느냐

 

실제 최하단의 스크롤의 값을 직접 확인해보면 height와 차이가 있을 수 있습니다.

스크롤을 최하단에 두고 Console창에 $(this).scrollTop()을 입력해봅니다.

( 차이가 없다면 넘어가세요 )

 

 

다른 페이지의 값

 

해당 페이지의 높이는 17813이지만 최하단 실제 스크롤 값은 16876입니다.

정확히 937만큼의 차이가 있죠.

 

현재 이 글을 보고있는 웹 브라우저의 창 높이가 $(window).height() 인데요. 이 값이 정확히 937이죠

 

정확히는 모르겠지만..

최하단의 스크롤 값을 구하려면 해당 페이지의 높이에서 웹 브라우저 창의 높이를 빼줘야 하는 것으로 보입니다.

( 아래 사이트를 참고했습니다 )

http://ankyu.entersoft.kr/Lecture/jquery/jquery_02_31.asp

 

 

결론은

최하단 스크롤의 동적인 값 = $(document).height - $(window).height() 입니다.

 

따라서 UP버튼과 비슷하게 최하단에서 100차이의 위치를 기준으로 잡으면

 

if($(this).scrollTop() < ($(document).height()-$(window).height()-100)) 

이 조건일 경우 DOWN 버튼이 나타나도록 해주시고 

 

else 조건에서 DOWN 버튼이 사라지도록 해주시면 됩니다.

 

여기까지가 1번 효과이고

 

 

 

2번 효과는 간단합니다.

 

먼저 아래와 같이 버튼을 만들어주시고 (id, style, title, img src는 본인 사이트에 맞게 설정해주시구요) 

<!-- 스크롤 DOWN -->
<a id ="downBtn" style="display:scroll;position:fixed;bottom:32px;right:22px;" href="#" title=Bottom>
<img src=./images/ScrollDown.png border="0"/></a>

위 버튼 id를 기준으로 

 

JQuery를 이용해 함수를 작성해보면 아래와 같습니다.

 

id가 downBtn인 요소를 클릭 시 스크롤 위치를 $(document).height() 값으로 400 (0.4s) 속도로 부드럽게 이동시킵니다.

$('#downBtn').click(function() {
        $('html, body').animate({scrollTop: $(document).height()}, 400);
        return false;
});

 

UP 버튼은 처음에 첨부한 소스코드를 확인하시면 됩니다. 

 

티스토리에 적용하시려면

맨 위 소스파일을 scroll_up.js 이름으로 저장해주시고

버튼으로 사용할 이미지를 각각 ScrollUp.png, ScrollDown.png 이름으로 저장 후

블로그 관리 - 스킨 편집 - html 편집 메뉴 - 파일 업로드에 위 3개 파일을 추가합니다.

 

다음으로 html 편집 메뉴에서

 

<head></head> 사이에 다음 코드를 추가합니다. ( JQuery script 필수 )

<script src="./images/scroll_up.js"></script>

 

그리고

<body> 끝부분에 아래 코드를 추가하시고 ( UP, DOWN 버튼 )

<!-- 스크롤 UP -->
<a id ="upBtn" style="display:scroll;position:fixed;bottom:32px;right:80px;" href="#" title=Top>
<img src=./images/ScrollUp.png border="0"/></a>
<!-- 스크롤 DOWN -->
<a id ="downBtn" style="display:scroll;position:fixed;bottom:32px;right:22px;" href="#" title=Bottom>
<img src=./images/ScrollDown.png border="0"/></a>

 

그리고 저장하시면 됩니다.

 

 

 

참고

https://uulog.tistory.com/404