맨위로 이동하기

 

 

 

원페이지 형식의 사이트나 한 페이지의 내용이 길어질 때 sticky header나 맨위로 이동하기 버튼을 이용해서

유저의 접근성에 편의를 제공하는데요.

 

오늘은 맨위로 이동하기 버튼을 넣는 법을 포스팅 해볼까 합니다.

 

 

 

<div style="width:100%; height:700px; background:#FC0;"></div>

<div style="width:100%; height:700px; background:#CC9;"></div>

<a style="display:scroll; position:fixed; bottom:10px; right:20px;" href="#" title=Top>
	<p style="padding:50px; background:#F66; color:#fff;">맨위로</p>
</a>

 

위 소스는 버튼을 클릭하면 순식간에 top으로 이동하는 소스인데, 추후에 제이쿼리를 이용해서 스무스하게 이동하는 소스도 포스팅 하겠습니다.

 

눈으로 확인 하시라고 html 파일 하단에 첨부하였으니,

다운받아서 테스트 해보세요~

 

맨위로버튼.html

다운로드