2012. 5. 3. 23:17ㆍIT/Tistory Tips
예전에 티스토리 블로그 오른쪽에 '맨 위로' 단추 달기 게시물에서 자바스크립트를 사용해서 화면 맨 위로 이동하는 화살표 만드는 법에 대해 살펴보았다. 오늘 이야기할 것은 jQuery 플러그인을 사용한 방법으로, 이전에 소개한 방법보다 다양한 설정을 지정할 수 있다. 예를 들어 속도를 조정하거나 화면 효과를 변경할 수 있고 또 처음엔 화살표가 나오지 않다가 일정 범위 이상 스크롤 바가 내려가면 나타나도록 할 수도 있다. 현재 제작자의 최초 게시글이 삭제된 상태이므로 아래의 파일을 내려받는다.
▷ jQuery Plugin: Scroll to Top v3 내려받기▷ jQuery Plugin: Scroll to Top v3.1 Tutorial
* 원본주소: http://blog.ph-creative.com/post/jQuery-Plugin-Scroll-to-Top-v3.aspx
내려받은 ScrollToTop.zip의 압축을 풀고 티스토리 센터 - [HTML/CSS 편집] - [파일 업로드]에 jquery.easing.js와 jquery.scroll.pack.js 파일을 올린다. 그다음 바로 옆의[HTML/CSS] 탭으로 이동해서 [skin.html] 부분에 화살표가 들어갈 위치를 선택하고 아래의 코드를 입력한다. 어디에 입력해야 할지 모르겠다면 <footer> 와 </footer> 사이에 적당히 삽입한다.
하이퍼링크를 연결하는 a 요소 사이에 go-top.png라는 이미지를 지정했다. 여기서 go-top.png는 화살표에 사용할 이미지 파일 이름이고 width, height는 화면에 표시할 이미지 너비와 높이다. img 요소 대신 일반 텍스트를 입력해도 된다. 화면에 주황색 화살표 외에도 푸른 글씨의 ▲TOP란 단추가 하나 보일 것이다. 텍스트를 사용하면 이처럼 표시된다.
<script src="./images/jquery.scroll.pack.js"></script>
<script src="./images/jquery.easing.js"></script>
<script>
//<![CDATA[
$(function(){$("#toTop").scrollToTop({speed:1000,ease:"easeOutBack",start:400})});
//]]>
</script>
</s_t3>
</body>
</html>
다음은 jQuery 플러그인을 불러오도록 지정해보자. 역시 [HTML/CSS] - [skin.html]로 이동하고 skin.html 부분에서 </s_t3>를 찾은 다음 그 바로 위에 표의 script 부분(푸른 글씨) 전체를 삽입한다. 보통 </s_t3>는 skin.html 거의 마지막에 위치한다. 위 표의 첫째 줄은 jQuery를 사용하기 위한 것이고 맨 아래는 Scroll To Top 플러그인의 세부 설정 변경을 위한 부분이다. 붉게 표시된 내용 중 speed는 스크롤 속도, ease는 효과, start는 화살표를 표시하기 시작할 위치다. start:400 으로 지정하면 페이지 맨 위에서 400px 이상 스크롤이 내려갔을 때만 화살표가 나타난다. 0이면 항상 표시된다. ease는 jQuery Easing Plugin을 사용한 효과인데, jQuery Easing Plugin 페이지 Example 코너에서 종류와 효과를 직접 테스트할 수 있다.
이제 처음에 입력한 코드에 스타일을 지정하면 끝이다. [HTML/CSS]의 style.css에 위 내용을 참고 해서 원하는 스타일을 입력한다. background는 배경색, cursor는 커서를 올렸을 때 커서 모양, border-radius는 모서리(border)를 둥글게 하는 속성이다. 또 position: fixed는 위치를 고정한다는 의미이고 bottom, right는 창 아래 000px만큼 떨어진 곳, 창 오른쪽에서 000px만큼 떨어진 곳에 위치시키란 의미다. position, bottom, right를 붙이면 창 오른쪽 아래 끝에서 10 X 10px 떨어진 위치에 화살표를 고정한다는 의미다.
마지막의 CSS 부분을 응용하면 얼마든지 원하는 모양의 '맨 위로' 단추를 만들 수 있다. 블로그 전체에 적용하는 것이 아니라 특정 페이지에만 적용하고 싶다면 글을 쓸 때 HTML 모드로 전환한 다음 위 코드를 그대로 붙여 넣는다. CSS 부분은 <style>와 </style>를 입력하고 그 사이에 붙여넣는다.
skin.html과 style.css에 위의 코드를 모두 입력했으면 [저장]을 눌러서 수정된 스킨을 저장한다. [저장]을 누르지 않으면 수정한 내용이 모두 없어지니 주의한다. 글을 읽다 중간에 모르는 코드가 나올땐 티스토리 블로그 오른쪽에 '맨 위로' 단추 달기 게시물이 도움이 될 것이다.
▲TOP