"맨 위로" 버튼 구현하기

SPA 웹페이지나 댓글이 200개 300개 달린 페이지에서 사용자가 직접 맨 위로 되돌아가기 위해 스크롤을 직접 이동하는 것은 고역이다.

특히 모바일로 접속한 사용자라면 더더욱 그렇다.

모바일 삼성인터넷 앱은 맨 위로 가는 기능이 내장되어 있지만 모바일 크롬 등은 아직 그런 기능이 없기 때문이다.

그래서 요즘엔 어딜 들어가든 대부분 맨 위로 가는 버튼이 존재하는데, 가끔 이게 없는 사이트를 들어가면 성질이 뻗칠 때가 있다. (대부분 블로그들)

현재 내 블로그에도 적용되어 있다. (우측 하단)

1. <a>태그와 #

가장 쉬운 방법은 <a>태그를 사용하는 것이다.

아래와 같은 <a>태그 하나만으로 페이지 맨 꼭대기까지 이동시켜준다.

#만 사용되면 그것은 곧 자기 페이지 자체를 의미한다.

1
<a href="#">맨 위로</a>
cs

그러나 위 방식을 사용하고 링크를 클릭하면 url에 #이 붙는다.

크게 상관없지만 별로 보기 좋은 방식은 아니다.

또한 위 방법은 개발 시 아직 아무것도 연결하지 않은 앵커를 만들 때 자주 사용되는 방법이다. 용도에 있어서도 일관성이 떨어진다.

id를 타겟으로 해 1번과 같은 방식으로 구현해볼 수 있다.

1
<a href="#header">맨 위로</a>
cs

페이지 맨 위에 있는 #header 를 가진 엘리먼트 타겟으로 이동하여 맨 처음으로 이동하는 효과를 부여하는 것이다. 장단은 1번과 비슷할 것 같다. 다만 '맨 위로' 기능이 아니라 페이지의 특정 부분으로 가는 쪽에서는 많이 쓰는 방법이다. (목차 기능 등)

대부분 추천되는 방법은 자바스크립트를 사용하는 것이다.

페이지 특정 부분에 위치한 <a>태그를 찾아다니는 것보다, 자바스크립트로 스크롤값을 받아와 필요할 때 나타나는 것이 사용자에게 편하다.

또한 <a href="#"> 으로 한 번에 스크롤을 이동시켜 버리는 것보다, 일정 속도로 서서히 이동시키는 것이 시각적으로 와닿는다.

물론 <a href="#"> 을 쓰고도 자바스크립트를 쓰면 같은 효과를 보여줄 수는 있지만, 그건 정말 최악의 방법이 될 것 같다.

아래 코드는 블로그에 구현해놓은 그대로 가져온 것이다.

jQuery를 사용했고, 복붙해 가져갈 때 Font Awesome도 빼먹지 말자.

가끔 둘러보면 아래 코드에서 'body'를 뺀 'html' 로만 선택자를 넣어놓은 것을 보는데, PC에선 상관없지만 모바일 환경에서 제대로 동작하지 않는 경우가 있어 html,body를 둘 다 선택하는 것이 좋다.

1
$('html,body').animate({scrollTop:0},600);
cs