아코디언 표시 위치

Question

저는 jQuery의 초보자입니다. jQuery UI 아코디언 기능을 시도하고 올바른 위치에 표시하는 데 문제가 있습니다. 아래에서 볼 수있는 질문은 대답이 없지만 비슷하지는 않지만 복잡합니다. scrollTo와 관련되어 있기 때문에 사용하지 않습니다. jQuery scrollTo accordion end position

내 질문에 간단합니다. jQuery 웹 사이트의 아코디언 예제 코드를 사용하여 첫 번째 패널에 긴 내용을 넣을 때. 두 번째 패널은 패널을 찾기 위해 아래로 스크롤해야하는 훨씬 낮은 위치로 밀려납니다. 두 번째 패널을 클릭하면 브라우저가 아코디언의 맨 위로 또는 적어도 두 번째 패널의 맨 위로 이동하지 않습니다. 사용자는 두 번째 패널에서 내용을보기 전에 위로 스크롤해야합니다.

Here은 바이올린 코드입니다.

친절하게 도와주세요. 감사!

Answer 1

당신은 새로운 패널의 상단에 스크롤 코드를 설정할 수있을 때이 같은 열린 패널 변경 :

또한 크기 각 패널을 유지하기 위해, 아코디언에 autoHeight: false을 설정할 수 있습니다

$("#accordion").accordion({ 
    change : function (event, ui) { 
     $('html, body').animate({ 
     scrollTop: $(ui.newHeader).offset().top 
     }, 500);   
    } 
}); 

그것의 내용.

$("#accordion").accordion({ 
    autoHeight: false, 
    change : function (event, ui) { 
     $('html, body').animate({ 
     scrollTop: $(ui.newHeader).offset().top 
     }, 500);   
    } 
}); 

편집 :

if(ui.newHeader.length > 0) { 
    $('html, body').animate({ 
     scrollTop: $(ui.newHeader).offset().top 
    }, 500); 
} 

이것은 패널의 경우 모든 발생하는 오류를 방지 할 수 있습니다 : 아코디언의 변경 이벤트 처리기에서 다음 코드를 사용하여 주석에 설명 된 문제를 해결하려면 닫혀있다.

jsFiddle은 here입니다.