jQuery를 활용한 스크롤효과(up, down 클릭시 scroll 이동을 천천히)

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를 활용하니 간단하고 소스 수정도 훨씬 쉽네요 ㅎㅎ