ENG
더 나은 웹개발을 꿈꾸는 기술 블로그. 웹이즈프리.
제이쿼리를 사용하여 화면 상단으로 화면, 스크롤이 이동하는 버튼을 만들어보겠습니다.
웹사이트를 방문하면 한 페이지의 콘텐츠가 매우 길 수 있습니다. 이때 상단 메뉴로 이동하거나 처음에 위치한 콘텐츠를 보고 싶을 수 있겠죠. 만약 페이지 최상단으로 할 수 있는 버튼이 있다면? 스크롤을 반복 사용하는 불편함을 없앨 수 있을 것입니다. 이런 편리한 인터페이스 방법인 Top으로 이동하는 버튼을 구현해보려합니다.
# 최상단으로 이동하는 버튼 만들기방문자가 페이지 어디 위치에서든 클릭하면 최상단 위치로 스크롤이 이동하게됩니다. 이때 화면이 한번에 전환되거나 아니면 애니메이션으로 부드럽게 이동할 수 있겠죠. 아무래도 애니메이션을 구현하는 방법이 더 좋을 것 같습니다.
! jquery animate() 메서드를 사용하여 구현animate() 다양한 애니메이선을 간단하게 구현할 수 있는 메서드로 스크롤 이동, 전환을 선택할 수 있습니다. 그럼 아래에서는 버튼을 하나 만들고 해당 버튼을 클릭시 최상단으로 이동하는 예제를 알아보겠습니다. 마지막에는 실제로 클릭해보세요.
먼저 스크립트입니다. 아래를 봐주세요.
@ scroll_top.js
var topEle = $('#topBtn');
var delay = 1000;
topEle.on('click', function() {
$('html, body').stop().animate({scrollTop: 0}, delay);
});
var delay = 1000;
topEle.on('click', function() {
$('html, body').stop().animate({scrollTop: 0}, delay);
});
여기서 delay 변수는 1000 즉 1초의 시간지연을 갖도록 변수를 지정하였습니다. 버튼을 클릭하면 최상단까지 이동하는데 서서히 1초에 걸쳐 서서히 이동하게됩니다.
또한 scrollTop() 메소드가 $('html, body') 선택자를 사용한 부분도 보입니다. 다른 브라우저에서도 동작하지 않는 경우를 방지하려면 html, body 단독으로 사용하지 않고 $('html, body')를 사용하는게 좋습니다. 안그러면 특정 브라우저에서 동작하지 않을 수 있습니다.
이제 html과 css를 알아보겠습니다.
@ scroll_top.html
<div>
<span id="topBtn">top</span>
</div>
<span id="topBtn">top</span>
</div>
html에서 버튼을 만들었으며 클릭하면 페이지 최상단으로 이동합니다. 아래는 css 스타일 코드입니다.
@ scroll_top.css
#topBtn {
position: absolute;
right: 2%;
bottom: 2%;
width: 40px;
height: 40px;
line-height: 40px;
display: block;
background: #000;
color: #fff;
font-size: 10px;
text-align: center;
border-radius: 5px;
}
position: absolute;
right: 2%;
bottom: 2%;
width: 40px;
height: 40px;
line-height: 40px;
display: block;
background: #000;
color: #fff;
font-size: 10px;
text-align: center;
border-radius: 5px;
}
이제 위의 버튼은 아래와 같은 모습으로 페이지 하단 우측에 고정되어 나타납니다. 여기까지 페이지 최상단으로 스크롤 이동하는 버튼을 구현해보았습니다.
# 실제로 동작해보기그러면 아래에서 어떻게 동작하는지 직접 클릭해보시기바랍니다. 아래 버튼은 위치만 다를뿐 똑같이 동작합니다. 버튼은 각각 500, 2000 delay 랎을 가집니다.
아래 버튼을 클릭해보기!!
