제이쿼리 스크롤 속도조절 문제입니다 ㅠㅠ 도와주세요ㅠㅠ

제이쿼리 스크롤 속도조절 문제입니다 ㅠㅠ 도와주세요ㅠㅠ

QA

제이쿼리 스크롤 속도조절 문제입니다 ㅠㅠ 도와주세요ㅠㅠ

본문

 
위 사이트에서 제이쿼리를 이용한 스크롤을 사용중인데요
클릭시 스크롤 속도를 제어하려면 어떻게 해야할까요 ㅠㅠ
 
스크롤 하면서 중간에 문구하나 보여줄라하는데 스크롤 속도가 너무 빨라서 휙하고 지나가네요 ㅠㅠ
 
고수님들 부탁드립니다!!
 
제글 봐주셔서 감사합니다!
 
 
아래껀 소스입니다.

<!doctype html>
<html lang="KO">
<head>
<title> </title>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
 
<style type="text/css">
html, body { margin:0px; padding:0px; width:100%; height:100%; }
 
#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; }
 
#content { width:100%; height:100%; padding-top:100px; }
.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="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
 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();
 
 $("#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');
 });
});
</script>
 
</head>
<body>
 
<div id="header">
     <dl id="nav">
          <dd>메뉴01</dd> <dd>메뉴02</dd> <dd>메뉴03</dd> <dd>메뉴04</dd> <dd>메뉴05</dd>
     </dl>
</div>
 
<div id="content">
     <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>
 
</body>
</html>

이 질문에 댓글 쓰기 :

답변을 작성하시기 전에 로그인 해주세요.
전체 123,162 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT