클릭 한번에 위로 스르륵 올라가는 스크롤링
생각보다 늦게 업데이트를 하는거 같은 블로깅이다. 사실 책갈피 태그 또는 넷갈피 태그라고 해서 a name 태그를 통해서 자신의 원하는 위치로 바로 찾아가게 만드는 태그로 할 수 있다. 마치 순간이동 처럼 말이다. 그러나 이번에는 스크립트를 통해 "스르륵" 부드럽게 스크롤링 하여 상단으로 올려주는 방법을 소개하려 한다. (필자의 블로그의 우측하단의 화살표 버튼과 같은 효과를 소개한다)
역시 어렵지 않으니 도전해보시기를 권장한다. 우선 TOP으로 올릴 아이콘을 구하거나 직접 만들어보도록 하자. 보통은 자신의 사이트의 분위기에 맞게 직접 작업한 이미지를 추천하지만 어렵다면 무료이미지 사이트에서 쓸만한 것들을 찾으면 되겠다. 그것마저 귀찮으신 분들을 위해 필자가 작업한 화살표를 올려두었다.
화살표 다운로드
다른이름으로 저장하자.
이미지가 준비가 되었다면 관리자 - 스킨편집 - HTML 편집 - 파일업로드 를 통해 이미지를 업로드 하자. 아참 그리고 스르륵 올라가게 할 스크립트도 같이 올리도록 하자. 스크립트 파일은 바로 아래서 다운로드 받도록 하자.
scrolling.zip이미지와 js파일이 업로드가 되었다면 준비 끝
HTML HEAD 코드
<script src="./images/scrolling.js"></script>우선 스크립트를 불러와야 하는데 head와 /head사이에 스크롤링 스크립트를 불러오자. 스크립트를 불러올때 한가지 팁은 보통 이런 스크립트는 jquery를 불러오는 스크립트 이후에 꼭 붙여 놓도록 하자. (제이쿼리를 이용한 스크립트 이기 때문에…)
HTML BODY 코드
<div class="btn_top"><a onclick="go_top();"><img src="./images/btn_top.png"></a></div>위 코드는 BODY의 제일 하단에 붙여 넣는 것을 추천하다. 여기까지 했다면 이제 거의 다 왔다. CSS만 만져주면 끝이다.
HTML CSS 코드
.btn_top{
cursor:pointer; margin:0; padding:0;
display:block; position:fixed; right:25px;
bottom:20px; z-index:9999;
}적당한 위치에 코드를 넣으면 되는데 여기서 확인해야 할 부분은 right, bottom 이 부분만 확인하면 될것 같다. 수치를 보면 느끼겠지만 right는 오른쪽에서 25px 떨어뜨려라 그리고 bottom은 제일 하단으로부터 20px 떨어뜨려라 이다.
수치를 변경하며 자신에게 맞는 수치를 맞추면 될 것이다. 이제 여러분들도 클릭한번으로 TOP까지 스르륵 올라가는 아이템을 장착하게 되었을 것이다. 궁금하신 점이 있으시면 댓글 남겨주시면 답변해드리도록 하며 이번 내용은 여기까지 하도록 하겠다.