jQuery 아코디언, 클릭 한 탭의 맨 위까지의 스크롤 시작 확장 된 탭이 클릭 된 것보다 위에 있으면 작동하지 않습니까?

Question

내 jquery 아코디언을 통해 내가 원하는 것을 수행하는 데 약간 문제가 발생했습니다.

항상 클릭되는 탭이 페이지 위쪽의 고정 된 크기의 픽셀로 스크롤되도록하고 싶습니다. 그러나 활성 탭이 클릭 된 탭 위에있을 때마다 페이지가 이미 약간 아래로 스크롤되면 클릭 된 탭의 내용의 상단과 부분이 페이지 상단을지나 위로 스크롤됩니다.

이

내가 무엇을 가지고 있습니다 :

여기

$(function() { 
    $("#accordion").accordion({ 
     autoHeight: false, 
     collapsible: true, 
     heightStyle: "content", 
     active: 0, 
     animate: 300 
    }); 
    $('#accordion h3').bind('click',function(){ 
     theOffset = $(this).offset(); 
     $('body,html').animate({ 
      scrollTop: theOffset.top - 100 
     }); 
    }); 
}); 

내 문제를 설명하기 위해 fiddle있어,

예를 들어, "2 장"확장은, 아래로 스크롤하고 "3 장"탭이과 모든 스크롤 페이지 떨어져, 다른 방법은 주위에 비록 작동합니다.

새 탭을 열기 전에 활성 탭을 닫으면 정상적으로 스크롤 할 수있는 탭이 무너져 내리는 높이가 있다고 가정합니다.

누군가 도움을 줄 수 있기를 바랍니다. 아마도 나는 잘못된 방향으로 접근합니다. 나는 jquery 스킬이 기본적인 컷 앤드 페이스트 이해로 제한되어 있기 때문에 실제로 어떤 일을하는지 모릅니다. ^^

미리 감사드립니다. 그리고 모든 도움과 조언을 해주실 곳이 있습니다. :)

건배

Answer 1

은 예, 탭의 높이가 문제의 원인 먹으 렴 폐쇄하기 이잖아.

클릭 한 h3의 상단은 그 위의 탭이 붕괴되어 즉시 변경됩니다.

해결 방법 (아마도 좋지 않은 방법)은 축소 애니메이션이 완료된 후 스크롤 애니메이션을 실행하는 것입니다. 예를 들어 축소 애니메이션이 300ms로 설정된 경우 310ms가 지난 후에 스크롤 애니메이션을 시작하십시오.

$(function() { 
     $("#accordion").accordion({ 
      autoHeight: false, 
      collapsible: true, 
      heightStyle: "content", 
      active: 0, 
      animate: 300 // collapse will take 300ms 
     }); 
     $('#accordion h3').bind('click',function(){ 
      var self = this; 
      setTimeout(function() { 
       theOffset = $(self).offset(); 
       $('body,html').animate({ scrollTop: theOffset.top - 100 }); 
      }, 310); // ensure the collapse animation is done 
     }); 
}); 

Updated Fiddle

Answer 2

당신은 아코디언에 활성화 된 기능을 추가 할 수 있습니다. 이렇게하면 다른 표시/숨기기 애니메이션이 완료되면 트리거됩니다.

$(function() { 
    $("#accordion").accordion({ 
     autoHeight: false, 
     collapsible: true, 
     heightStyle: "content", 
     active: 0, 
     animate: 300, 
     activate: function(event, ui) { 
      try { 
       theOffset = ui.newHeader.offset(); 
       $('body,html').animate({ 
        scrollTop: theOffset.top 
       }); 
      } catch(err){} 
     } 
    }); 
}); 

오픈 아코디언 탭을 축소하는 경우 ui.newHeader는 정의되지 않으므로 try catch가 필요합니다.