자바스크립트 간단히 맨 위로(Top) 기능 주기

맨 위로 기능은 어떻게 줄까?

컨텐츠가 워낙 길때 스크롤을 하염없이 다시 올리기엔 벅차다.

그래서 항상 우측에 "맨 위로" 또는 "Top" 버튼을 두어 클릭하면 맨 위로 가게 해주기 때문에

사용자의 편의를 생각하면 꼭 있어야 되는 기능이다.

물론 아이폰에서는 화면 맨 위 상단을 터치하면 해당 기능을 실행해주긴 한다.

 

원래 예전에 HTML 코딩을 할 때 주로 사용했던 방식은 아래와 같이 했었다.

<a href="#top">맨 위로</a>

그러나, 위와 같이 써 주면 접근성 오류는 물론이고 웹표준에도 맞지 않다.

 

그러면 간단하게 자바스크립트로 구현해보자.

<a href="#" onClick="javascript:window.scrollTo(0,0)">맨 위로</a>

위와 같이 하면 동작이 잘 된다. 

하지만 위 방법대로 하면 <a> 태그에 #기호를 쓰기 때문에 또 웹표준 오류다.

만약 이미지로 top버튼을 준다면 아래와 같이 해보자.

<input type="button" value="맨위로" onClick="javascript:window.scrollTo(0,0)" />
<input type="image" src="top.gif" onClick="javascript:window.scrollTo(0,0)" alt="맨위로" />

이제 완벽하다. 웹표준 오류가 뜨지 않고도 맨위로 기능 맘껏 쓸 수 있다.