-
Jquery[제이쿼리] on()+offset()+animate()로 스크롤 스르륵 이동하기자바스크립트[JavaScript]/제이쿼리[Jquery] 2016. 11. 25. 00:15
안녕하세요~ 주니주니 입니다.
오늘은 제이쿼리[jquery] on()+offset()+animate()로 메뉴에 해당하는 위치로 스크롤을 스르륵 이동하도록 해보겠습니다.
오늘은 먼가 준비할게 많네요 ㅠ_ㅠ
<div class="m0"> <== 부분입니다.
아래로 조금 내려오니
<div class="m1"><== 부분이 나오네요!
그럼 확인하고 시작해볼까요?===============================
$('li').on("click",function(){
var me = $(this).val();
if(me == 0){
var scroll = $('.m0').offset();
$( 'html, body' ).stop().animate({scrollTop : scroll.top},1000,'swing');
}
else if(me == 1){
var scroll = $('.m1').offset();
$( 'html, body' ).stop().animate({scrollTop : scroll.top},1500,'swing');
}
else if(me == 2){
var scroll = $('.m2').offset();
$( 'html, body' ).stop().animate({scrollTop : scroll.top},2000,'swing');
}
else if(me == 3){
var scroll = $('.m3').offset();
$( 'html, body' ).stop().animate({scrollTop : scroll.top},2500,'swing');
}
});
===============================
<li> 태그가 click 되면
me라는 변수에 해당 li의 value의 값을 가지고와 저장합니다.
변수안에 0/1/2/3 라는 값이 들어있겠죠?
me의 변수값이 0이면 scroll이라는 변수안에
$('.m0').offset();<== class m0의 offset()메서드의 리턴 값을 저장합니다.
그럼 scroll 변수 안에 값은 offset() 리턴 값 offset.top/offset.left 값 두 개가 저장되어있답니다.
저희는 수직으로 이동하기 위해 offset.top 값이 필요하답니다.
$( 'html, body' ).stop().animate({scrollTop : scroll.top},1000,'swing'); <==
<html>, <body>태그의 대상으로 animate() 메서드를 이용하여 scrollTop 값을 scroll.top으로
1000의 값은 저번에 배워서 아시죠? 1000당 1초입니다. 1초 동안 이동하라는 뜻입니다.
'swing'<==효과중 1개입니다.여러개가가있기때문에에 다음에또배워볼께요..
※ stop()<== stop()메서드가 있는이유는 연타를 했을경우를 대비해서입니다.
※ scroll.top값은 class m0의 offset.top 위치값입니다.아직 메뉴를 클릭하기 전입니다.
메뉴2를 누르니 class m2로 스르륵 2초동안 내려간답니다.
오늘은 제이쿼리[jquery] on()+offset()+animate()로 메뉴에 해당하는 위치로 스크롤을
스르륵 이동하도록 해보았습니다.
그럼 다음에 또만나요~'자바스크립트[JavaScript] > 제이쿼리[Jquery]' 카테고리의 다른 글
Jquery[제이쿼리] eq(),:lt(),:gt() 인덱스 번호로 요소찾기 (0) 2016.11.25 Jquery[제이쿼리] before,after,prepend,append 배우기 (0) 2016.11.25 Jquery[제이쿼리] on(change)+val()로 select 값으로 변경하기 (1) 2016.11.25 Jquery[제이쿼리] focus() blur()메서드 배우기 (1) 2016.11.25 Jquery[제이쿼리] focus() 회원가입조건걸기 벨리데이션(validation) (0) 2016.11.24
