티스토리 블로그 페이지 상단으로 (top) 버튼 만들기

블로그 특성상 한 화면에 여러개의 글을 출력할 일이 많습니다. 또한 양질의 포스팅을 하다보면 텍스트의 양이 많아지고 더불어 스크롤의 길이도 늘어나기 마련입니다. 조용한 사무실에 앉아 웹서핑을 하면서 긴 글을 읽고난후 다시 맨위로 돌아가려면 하는수 없이 마우스 스크롤을 '드륵드륵' 올려야하죠. 물론 키보드에 있는 'Home'를 눌러도 되지만 그것마저도 귀찮은지 우리는 마우스의 스크롤을 사용합니다.

때문에 본문이 긴 페이지를 지닌 사이트나 블로그에서 화면 우측 또는 카피라이트인 푸터 부분에 페이지 상단으로 위치시켜주는 버튼이나 링크를 만들어 달아주기도 합니다. 이는 오로지 유저를 위함이며, 아주 유용하게 사용되죠.

만들기는 어렵지 않습니다. 화면 상단으로 이동할 링크를 하나 작성해 주고 화면 오른쪽 하단에 고정만 시켜주면 되죠.

아래는 그에 관련한 코드입니다. 수정과 사용이 용이 하게끔 html과 css를 분리하여 작성하였으니 필요하시분은 복사하셔서 본인의 블로그에 적용시키시면 되겠습니다.

이미지로 바꿔 사용하셔도 좋습니다.

HTML 코드 (HTML/CSS 편집 페이지 > skin.html 하단쪽에 삽입해 줍니다.)

GoTop▲

CSS 코드 (HTML/CSS 편집 페이지 > style.css 하단쪽에 삽입해 줍니다.)