클릭 한 부분의 위쪽에 자동 스크롤 아코디언

잘 작동하는 아코디언 콘텐츠 홀더에 다음 코드가 있습니다. 나는 클릭 한 섹션의 상단에 페이지를 자동 스크롤하는 방법을 연습하는 것 같다. 지금은 컨테이너가 열리지 만 페이지가 전혀 스크롤되지 않습니다.클릭 한 부분의 위쪽에 자동 스크롤 아코디언

도와주세요! G

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name = "viewport" content = "user-scalable = no"> 

<title>TEST</title> 
<link href="style/english.css" rel="stylesheet" type="text/css" /> 
<link href="style/reset.css" rel="stylesheet" type="text/css" /> 
<link href="style/jquery.ui.all.css" rel="stylesheet" type="text/css" /> 

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"> 
<script type="text/javascript" src="scripts/jquery1.8.2.min.js"></script> 
<script type="text/javascript" src="scripts/jquery-ui-1.10.3.custom.js"></script> 


<!--Accordian menu JQuery--> 
<script type="text/javascript"> 
$(function() { 
     $("#accordion").accordion({ 
      active: 'none', 
      heightStyle: "content", 
      collapsible: true, 
      /*heightStyle: "fill"*/ 
     }); 
    }); 


</script> 


<script> 
function Clicked1(){ 
$("#accordion").accordion({ active: 0 }); 
} 

function Clicked2(){ 
$("#accordion").accordion({ active: 1 }); 
} 

function Clicked3(){ 
$("#accordion").accordion({ active: 2 }); 
} 

function Clicked4(){ 
$("#accordion").accordion({ active: 3 }); 
} 

function Clicked5(){ 
$("#accordion").accordion({ active: 4 }); 
} 

function Clicked6(){ 
$("#accordion").accordion({ active: 5 }); 
} 

</script> 
<!--Accordian menu JQuery--> 

</head> 
<body> 

<div id="mainContainer" style="background-color:#009edb;"> 

    <!--Header--> 
    <div id="headerContainer"> 

     <a href="index.html"><img src="images/header.jpg" width="1000" height="110" border="0" /></a> 

    <!--Menu--> 
    NAVIGATION CODE 
    <!--Menu--> 
    </div> 
     <!--Header--> 

     <!--Body--> 
    <div id="mainBodyContainerWhite"> 
    <div id="topExtra"></div> 

     <!--Spotlight--> 
    <div id="spotlightBoxContainer"> 
    <div id="spotlightBoxFull" style="height:440px;"><img src="images/case_spotlight.jpg" width="986" height="508" usemap="#Map2" border="0" /> 
      <map name="Map2" id="Map2"> 
      <area shape="rect" coords="1,1,247,169" href="#section1" onclick="Clicked1()" id="scroll" /> 
      <area shape="rect" coords="494,2,740,169" href="#section1" onclick="Clicked2()" id="scroll" /> 
      <area shape="rect" coords="248,170,492,338" href="#section1" onclick="Clicked3()" id="scroll" /> 
      <area shape="rect" coords="741,171,983,335" href="#section1" onclick="Clicked4()" id="scroll" /> 
      <area shape="rect" coords="3,338,247,506" href="#section1" onclick="Clicked5()" id="scroll" /> 
      <area shape="rect" coords="491,338,739,507" href="#section1" onclick="Clicked6()" id="scroll" /> 
      </map> 
    </div> 
    </div> 
    <!--Spotlight--> 


    <div id="accordion"> 
    <!--Split--> 
    <h3 style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;">ACCORDIAN 1</span></h3> 
     <div class="accordion-content"> 
      <div id="ContainerLeftInner"> 
      <div class="textInner"> 
      TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST. 
      </div> 
       </div> 
      </div> 

    <!--Split--> 
    <h3 style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;">ACCORDIAN 2</span></h3> 
     <div class="accordion-content"> 
      <div id="ContainerLeftInner"> 
      <div class="textInner"> 
      TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST. 
      </div> 
       </div> 
      </div> 

    <!--Split--> 
    <h3 style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;">ACCORDIAN 3</span></h3> 
     <div class="accordion-content"> 
      <div id="ContainerLeftInner"> 
      <div class="textInner"> 
      TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST. 
      </div> 
       </div> 
      </div> 

    <!--Split--> 
    <h3 style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;">ACCORDIAN 4</span></h3> 
     <div class="accordion-content"> 
      <div id="ContainerLeftInner"> 
      <div class="textInner"> 
      TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST. 
      </div> 
       </div> 
      </div> 

    <!--Split--> 
    <h3 style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;">ACCORDIAN 5</span></h3> 
     <div class="accordion-content"> 
      <div id="ContainerLeftInner"> 
      <div class="textInner"> 
      TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST. 
      </div> 
       </div> 
      </div> 

    <!--Split--> 
    <h3 style="border-top:solid 1px #009edb; border-bottom:solid 1px #009edb;">ACCORDIAN 6</span></h3> 
     <div class="accordion-content"> 
      <div id="ContainerLeftInner"> 
      <div class="textInner"> 
      TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST. 
      </div> 
       </div> 
      </div> 

    <!--Split--> 
    </div>  
    <!--Spotlight-->  
    </div> 
</div> 

    <!--Body--> 

<div id="footerContainer"></div> 

</body> 
</html>

출처

2013-10-22 Geeky Gaj

이이 질문에 관련되지 않고, 단지 도움이 제안은 당신의 js 코드의 비트를 최소화 할 수 있습니다.

먼저
는 jQuery 코드 아래 추가 지역에서 onclick 속성을 제거합니다.
다음이 도움

$('#Map2 > area').click(function() { 
    $("#accordion").accordion({ active: $(this).index() }); 
});

, Clicked1(), Clicked2() 같은 기능 이름과 희망 코드의 라인 14 + 제거!

출처

2013-10-22 13:37:52

덕분에 -이 (나를 더 많이 배울 수) 감사,하지만 어떻게 JS는 특정 영역을 클릭 할 때까지 열 수있는 아코디언 섹션 알고 있나요? 각 'clicked()'영역은 별도의 아코디언 섹션을 엽니 다. –

감사합니다. @ GeekyGaj. 우리는'$ (this) .index()'를 사용하고 있습니다. 첫 번째 영역을 클릭하면 '$ (this) .index()'값이 '0'이므로 활성 아코디언이 첫 번째 영역이됩니다. 다음으로 두 번째 영역을 클릭하면 '$ (this) .index()'값이 '1'이되므로 활성 아코디언이 두 번째 등등이됩니다. –

@palash, 내가 기술을 사용했지만 이후 모든 onclick을 제거 했으므로 클릭이 전혀 작동하지 않습니다. –

괴짜 Gaj;

안녕하세요. 팔라스 (Palas)는 좋은 지적이며 내 솔루션에 그의 제안을 포함시킬 수 있습니다. 나는로드 할 때 열려있는 div로 스크롤하는 작업 예제 (나는 클릭 가능한 링크에 함수를 링크하지 않았다)와 함께 jfiddle을 가지고있다. jfiddle입니다.

키는 상단의 텍스트 조각 주위 스팬 태그를 배치하고 (ID 별) 스팬 태그의 상부의 위치에 scrollTop 호출된다. 나는 이것이 당신이 찾고있는 것을 성취 할 것이라고 믿습니다. palash 많이

$(function() { 
    $("#Accordion").accordion({ 
     collapsible: true, 
     active: false 
    }); 
    Navigate(0); 

}); 

function Navigate(dest) { 
    $("#Accordion").accordion({ 
     active: dest 
    }); 
    $(window).scrollTop(($("#acc" + dest).offset().top - 60)); 
}

출처

2013-10-22 14:07:36

감사를 밀어 나던, 당신의 jfiddle 예를 따르도록 노력하고 내가 첫 번째 클릭에 20 픽셀 정도를 스크롤 보이지만, 다른 링크에있는 다른 두 번째 클릭 후에는 스크롤 오른쪽 아래. 내가 도대체 뭘 잘못하고있는 겁니까 ? http://grouporigin.com/clients/zadco/23102013/case_studies.html –

코드를 보았을 때 링크가없는 것처럼 보입니다 (그림은 다음과 같습니다). 나는 말할 수있는 한) 사건에 붙였다. onclick = "Navigate (x)"를 문제의 링크로 추가하려는 경우 x는 숫자입니다. 이 번호는 스크롤하려는 요소의 ID와 일치해야합니다. jsfiddle을 다시 업데이트했습니다. –

미안, 내가 그 의견을 쓸 때 나는 잠 들어 있었다. jsfiddle이 작동하고 나는 무슨 일이 일어나고 있는지 설명하기 위해 주석을 달았습니다.한번보세요. 구현하기가 복잡해 보이면 다시 돌아와서 뭔가를 알아낼 수 있습니다. –

클릭 한 부분의 위쪽에 자동 스크롤 아코디언

답변

관련 문제