티스토리 맨 위로, 맨 아래로 버튼 간단하게 만들기

이번에는 간편하게

맨 위로 그리고 맨 아래로 버튼을

만드는 방법에 대해서 적어본다.

본문이 짧을 때는 상관이 없지만

긴 글일 경우에는 간혹 읽었던 부분이

기억이 나지 않을 때가 있는데

위로 무작정 스크롤을 올리기엔

긴 글은 상당히 귀찮아 진다.

뭐 당연히 키보드에 Home과 End버튼이

있다는 것은 다 아는 사실이지만

마우스를 잡은 상태에서 그냥 클릭으로

하는게 더 편한게 사실이기에 ㅎㅎ

일단 편의를 위한 소스투척 먼저

맨위로.txt

아이콘도 투척

icons.zip

소스를 한번 살펴보면

모두 HTML A 태그로 둘러 쌓여져 있다.

일단 갖다 붙이기만 하기엔 마음에 안들면

수정이 불가능하니까 일단 하나 배우고가자.

POSITION 속성 배우기 (CLICK)

bottom은 페이지 하단에서 위로 높이

left는 페이지 좌에서 우로 거리

아래 두 그림을 보면 <a href="#bottom" 은

<Div id="bottom">이 위치한 곳이

페이지 싱딘에 위치하게 이동하게 한다.

예로 나는 밑으로 버튼을 누르면

본문(article_rep_desc)이 끝난 후가

페이지 최상단에 위치하게 설정했다.

클릭하면 위치하길 원하는 곳으로

아래와 같이 id="이름"을 추가해서

설정하면 되겠다.