제이쿼리 스크롤 속도조절 문제입니다 ㅠㅠ 도와주세요ㅠㅠ 채택완료
그누초보님
11년 전
조회 13,194
http://sir.co.kr/bbs/board.php?bo_table=g4_plugin&wr_id=14913&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC">http://sir.co.kr/bbs/board.php?bo_table=g4_plugin&wr_id=14913&sca=&sfl=wr_subject%7C%7Cwr_content&stx=%EC%A0%9C%EC%9D%B4%EC%BF%BC%EB%A6%AC
위 사이트에서 제이쿼리를 이용한 스크롤을 사용중인데요
클릭시 스크롤 속도를 제어하려면 어떻게 해야할까요 ㅠㅠ
스크롤 하면서 중간에 문구하나 보여줄라하는데 스크롤 속도가 너무 빨라서 휙하고 지나가네요 ㅠㅠ
고수님들 부탁드립니다!!
제글 봐주셔서 감사합니다!
아래껀 소스입니다.
</div>
<div><!doctype html>
<html lang="KO">
<head>
<title> </title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr"></div>
<div> </div>
<div><style type="text/css">
html, body { margin:0px; padding:0px; width:100%; height:100%; }</div>
<div> </div>
<div>#header { width:100%; height:100px; background-color:#dddddd; position:fixed; left:0px; top:0px; }
#nav { position:absolute; bottom:10px; left:50%; margin:0px 0px 0px -250px; padding:0px; }
#nav dd { width:100px; height:30px; margin:0px; padding:0px; float:left; border:1px solid black; line-height:30px; cursor:pointer; background-color:#ddddff; text-align:center; }</div>
<div> </div>
<div>#content { width:100%; height:100%; padding-top:100px; }</div>
<div>.con { font-family:Georgia; font-size:150px; text-align:center; }
#con_01 { width:100%; height:600px; background-color:#ffdddd; }
#con_02 { width:100%; height:800px; background-color:#ddffdd; }
#con_03 { width:100%; height:1300px; background-color:#ddddff; }
#con_04 { width:100%; height:500px; background-color:#ffaadd; }
#con_05 { width:100%; height:700px; background-color:#ddffaa; }
</style>
<script type="text/javascript" src="<a href='<a href="http://code.jquery.com/jquery-1.9.1.min.js"></script'" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-1.9.1.min.js"></script'</a>><a href="http://code.jquery.com/jquery-1.9.1.min.js" target="_blank" rel="noopener noreferrer">http://code.jquery.com/jquery-1.9.1.min.js</a>"></script</a>>
<script type="text/javascript">
$(function(){</div>
<div> var he_arr = new Array(); // 각 div의 높이를 가져와 스크롤 위치를 구한다.
he_arr[0] = 0;
he_arr[1] = $("#con_01").height();
he_arr[2] = he_arr[1] + $("#con_02").height();
he_arr[3] = he_arr[2] + $("#con_03").height();
he_arr[4] = he_arr[3] + $("#con_04").height();</div>
<div> </div>
<div> $("#nav dd").each(function(i){
$(this).attr("idx", i); // 각 메뉴에 idx 값을 넣는다.
}).click(function() { // 메뉴 클릭시 해당 크기만큼 스크롤시킨다.
$('html, body').animate({scrollTop:he_arr[$(this).attr("idx")]});
}).hover(function() { // 메뉴에 마우스 오버시 바탕색변경
$(this).css('background-Color','#ddffdd');
},function() { // 메뉴에 마우스 아웃시 바탕색원위치
$(this).css('background-Color','#ddddff');
});</div>
<div>});
</script></div>
<div> </div>
<div></head>
<body></div>
<div> </div>
<div><div id="header">
<dl id="nav">
<dd>메뉴01</dd> <dd>메뉴02</dd> <dd>메뉴03</dd> <dd>메뉴04</dd> <dd>메뉴05</dd>
</dl>
</div></div>
<div> </div>
<div><div id="content"></div>
<div> <div id="con_01" class="con">11111</div>
<div id="con_02" class="con">2222</div>
<div id="con_03" class="con">3333</div>
<div id="con_04" class="con">4444</div>
<div id="con_05" class="con">5555</div></div>
<div></div></div>
<div> </div>
<div></body>
</html>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인