웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > jquery

jQuery 페이지 최상단 top으로 이동하는 버튼 만들기, 스크롤 이동

Last Modified : 2019-08-06 / Created : 2018-01-10
18,221
View Count

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

웹사이트를 방문하면 한 페이지의 콘텐츠가 매우 길 수 있습니다. 이때 상단 메뉴로 이동하거나 처음에 위치한 콘텐츠를 보고 싶을 수 있겠죠. 만약 페이지 최상단으로 할 수 있는 버튼이 있다면? 스크롤을 반복 사용하는 불편함을 없앨 수 있을 것입니다. 이런 편리한 인터페이스 방법인 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 랎을 가집니다.

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

Previous

jQuery 전체 클래스를 제거하고 다시 추가하는 toggleClass() 방법

Previous

제이쿼리 포커스 아웃 이벤트 알아보기, focusout()