jQuery란 자바스크립트 라이브러리의 하나로 다양한 브라우저에서 HTML문서조작과 이벤트처리를 간단하게
할 수 있는 API입니다. 이번엔 jQuery를 활용해서 제 블로그의 플로팅 메뉴처럼 UP, Down이미지를
클릭시 바로 top, footer로 이동하는것이 아닌 천천히 스크롤을 따라 이동하는 효과를 만들어 보겠습니다.
소스
플로팅메뉴_스크롤.txt$('body, html')에서 body를 적용하지 않으면 IE에서 먹히지 않아서 두개다 넣어줬습니다.
scrollTop의 경우 세로를 기준으로 나타내며
scrollLeft는 좌우를 나타냅니다. 플로팅 메뉴는 위아래로의 이동을 하기때문에 scrollTop을 사용했습니다.
0값의 경우 페이지의 첫시작이 0px이기때문에 최상단으로 이동합니다.
$(document).height();는 문서의 세로전체화면을 나타냅니다. 이값을 scrollHeight이라는 변수에 저장하고
#homedown의 scrollTop에 주었습니다. 따라서 Down이미지를 누를경우 문서의 마지막으로 이동 하게 됩니다.
그다음 숫자 800의 경우 0.8초동안에 이동 하겠다는것을 나타냅니다. 이 값을 수정하여 스크롤의 속도를
조절할 수 있겠죠??
이상 간단하게 위아래 스크롤 이동을 만들어봤습니다. 순수 자바스크립트로 작성했으면
소스가 많이 길어졌을텐데 jQuery를 활용하니 간단하고 소스 수정도 훨씬 쉽네요 ㅎㅎ
'블로그' 카테고리의 다른 글
| 티스토리에 Mixsh 위젯 달기! (0) | 2014.02.10 |
|---|---|
| 한글2010과 티스토리 연동하기 (0) | 2014.02.08 |
| 티스토리 플로팅 메뉴 만들기(왼쪽 메뉴, 스크롤 메뉴) (1) | 2014.02.03 |
| 티스토리 태그목록 3D형식으로 출력하기 (0) | 2014.02.01 |
| 티스토리 카테고리의 다른글 위치변경하기 (0) | 2014.01.31 |