제이쿼리(jQuery) if else animate 활용하여 화면 맨 위로 가는 TOP 버튼 만들기

자바스크립트 언어 중 하나인 제이쿼리를 이용해서 티스토리 블로그나, HTML 관련 사이트에 흔히 볼 수 있는 TOP 버튼을 만들 수 있습니다. 아시다시피 이 버튼을 누르면 화면 맨 위로 자연스럽게 올라가는 것을 확인하실 수 있는데, 어떻게 만들어지는지 한번 알아보겠습니다. 참고로 이 방법은 절대적인 방법이 아니라, 코딩을 마크업 하시는 분들의 개인 취향에 따라 조금씩 내용이 달라질 수 있습니다. 여기에서는 제가 사용한 방법을 말씀드리겠습니다.


제이쿼리 jQuery 링크 걸기

먼저 HTML 문서의 <head> 안쪽에 제이쿼리 라이브러리를 불러오도록 만들어야 합니다. 보통은 1.8.1 버전을 많이 이용하지만 혹시모르니, 최신 버전까지 다 가지고 오도록 하겠습니다.




이 두개의 주소를 <title> 바로 아래에 붙여주시면 됩니다. 그리고 본문의 내용과 스타일에 대해서는 예시를 위해서 대충 마크업 하겠습니다. 그냥 참고용으로만 봐주시면 됩니다. 


jQuery 마크업

스크립트 코드는 다음과 같습니다.


$(document).ready(function () {
    $(window).scroll(function () {
        if ($(this).scrollTop() > 200) {
            $(TOP버튼 id 또는 class 값).fadeIn();
        } else {
            $(TOP버튼 id 또는 class 값).fadeOut();
        }
    });
    $(TOP버튼 id 또는 class 값).click(function () {
        $('html, body').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

이것을 <script> 안쪽에 그대로 넣어두시면 됩니다. 외부스타일로 하셔도 되고 내부스타일로 진행하셔도 됩니다. 중요한것은 선택자 부분입니다.


TOP버튼 id 또는 class 값이라고 작성되어 있는 부분에 선택요소를 넣으시면 됩니다. 선택요소는 큰따옴표로 감싸줍니다. id는 #을, class는 .을 꼭 넣으셔야 합니다.


scrollTop() > 200 의 숫자 부분은 스크롤 해서 Top버튼이 나타나는 최소 세로 픽셀값 입니다. 값이 커질수록 스크롤을 한참 아래로 했을 때 Top 버튼이 나타나게 됩니다.


마지막 값 500의 의미는 스크롤되는 속도 입니다. 밀리세컨드로 표현되기 때문에 500은 0.5초를 뜻합니다.


top버튼.zip


위의 첨부파일을 다운로드 받으시고 직접 확인해 주시면 되십니다. 끝.




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

이 글을 공유하기

댓글(3)

Designed by JB FACTORY