제이쿼리(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위의 첨부파일을 다운로드 받으시고 HTML과 CSS의 예제를 직접 확인해 주시면 되십니다. TOP 버튼은 보통 브라우저 해상도에 고정으로 나타나기 때문에 display 속성으로 fix를 사용하게 됩니다. 이 점을 잘 이해하시어 응용하시면 되겠습니다. 끝.
"친절한효자손 취미생활" 을 검색!
