제이쿼리를 사용하여 화면 상단으로 화면, 스크롤이 이동하는 버튼을 만들어보겠습니다.

웹사이트를 방문하면 한 페이지의 콘텐츠가 매우 길 수 있습니다. 이때 상단 메뉴로 이동하거나 처음에 위치한 콘텐츠를 보고 싶을 수 있겠죠. 만약 페이지 최상단으로 할 수 있는 버튼이 있다면? 스크롤을 반복 사용하는 불편함을 없앨 수 있을 것입니다. 이런 편리한 인터페이스 방법인 Top으로 이동하는 버튼을 구현해보려합니다.
# 최상단으로 이동하는 버튼 만들기방문자가 페이지 어디 위치에서든 클릭하면 최상단 위치로 스크롤이 이동하게됩니다. 이때 화면이 한번에 전환되거나 아니면 애니메이션으로 부드럽게 이동할 수 있겠죠. 아무래도 애니메이션을 구현하는 방법이 더 좋을 것 같습니다.

! jquery animate() 메서드를 사용하여 구현animate() 다양한 애니메이선을 간단하게 구현할 수 있는 메서드로 스크롤 이동, 전환을 선택할 수 있습니다. 그럼 아래에서는 버튼을 하나 만들고 해당 버튼을 클릭시 최상단으로 이동하는 예제를 알아보겠습니다. 마지막에는 실제로 클릭해보세요.

먼저 스크립트입니다. 아래를 봐주세요.

@ scroll_top.js
var topEle = $('#topBtn');
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>

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;
}

이제 위의 버튼은 아래와 같은 모습으로 페이지 하단 우측에 고정되어 나타납니다. 여기까지 페이지 최상단으로 스크롤 이동하는 버튼을 구현해보았습니다.



# 실제로 동작해보기그러면 아래에서 어떻게 동작하는지 직접 클릭해보시기바랍니다. 아래 버튼은 위치만 다를뿐 똑같이 동작합니다. 버튼은 각각 500, 2000 delay 랎을 가집니다.

아래 버튼을 클릭해보기!!

top delay 500
top delay 2000