블로그 스킨을 살짝 변경했습니다. 변경을 하고 나니 위로 가기 버튼이 필요해 보입니다. 키보드에서 Home을 누르면 위로 올라가지만 블로그 스킨에도 추가해 조금이라도 보기 편하게 만들어봤습니다.
▲ 블로그를 읽다 보면 오른쪽 아래에 저런 마크가 생깁니다. 보기에는 그냥 제 블로그 이름으로 보이지만 클릭하면 화면의 가장 위로 올라가는 버튼입니다. 화살표 같은 이미지로 할 수 있지만 약간의 감성을 주고 싶었습니다.이제 위로 올라가기, 탑 버튼을 만들어보겠습니다.
▲ 가장 먼저 해야 할 일은 버튼의 이미지를 업로드해야 합니다. 저는 60*60px 사이즈로 만들었습니다. 스킨 편집에 들어가서 HTML 편집에서 파일 업로드를 클릭하고 이미지를 올립니다. 전 top.png로 올렸습니다.
▲ 직접 만든 이미지입니다.
▲ 이제 html 편집에 들어가서 </body> 위에 다음 태그를 입력해주고 저장합니다.
<script type="text/javascript">
$(function(){
$("#gotop").hide(); // 처음에는 버튼을 숨긴다
$(window).scroll(function(){ // 스크롤을 시작하면
if($(this).scrollTop() > 100){$("#gotop").fadeIn();} // 스크롤이 100px 되면 버튼이 서서히 표시된다
else{$("#gotop").fadeOut();} // 스크롤이 100px 이하가 되면 버튼이 천천히 없어진다
});
});
</script>
<a href="#" id="gotop" style="display:none;position:fixed;bottom:30px;right:30px;z-index:99999999" title="Top"><img src="./images/top.png" border="0"/></a>
이상, 탑 버튼 만드는 방법을 알아봤습니다. 이 방법을 잘 이용하면 아래로 가는 버튼과, 블로그 홈으로 가는 버튼도 쉽게 만들 수 있습니다. 활용해 보세요.^^ 태그는 첨부 파일에 있습니다.