Jquery로 자동 스크롤 다운 하시겠습니까?

나는 정의 된 높이의 모달 상자가 있습니다. 이 상자 안에는 사용자가 링크를 클릭 할 때 펼쳐지는 아코디언 상자가 있습니다. 토글 한 아코디언 상자의 높이가 모달 상자의 높이를 초과하므로 스크롤 막대가 나타납니다.Jquery로 자동 스크롤 다운 하시겠습니까?

아코디언 상자에 새 콘텐츠를 표시하려면 막대를 자동으로 가장 낮은 지점으로 스크롤하고 싶습니다.

아코디언 상자는 다음과 같습니다 : 기존의 기능에 기능이 스크롤을 아래로 통합 할 수있는 방법이

<script type="text/javascript"> 
$(document).ready(function(){ 
$(".btn-slide").click(function(){ 
$("#panel").slideToggle("slow"); 
$(this).toggleClass("active"); return false; 
}); 
}); 
</script>

있습니까? 이 유형의 동작을위한 기존 Jquery 함수가 있습니까? 나는 당신이 좋은 부드러운 스크롤을 원하는 경우

... 무엇을 찾고 있는지 이해한다면

출처

2010-07-27 Thomas

, 당신은, scrollTop을 사용 http://api.jquery.com/scrollTop/

건배를 볼 수 있었다.

출처

2010-07-27 18:54:47 peol

이것에 대해 생각했지만 내용이 역동적이어서 hieght가 무엇인지 확신 할 수 없습니다. – Thomas

원하는 요소에 대한 참조가 있어야하므로 $ (window) .scrollTop ($ (wantedelement) .offset(). top)을 사용할 수 있습니다. – peol

좋아, 이렇게 설정했습니다. $ (document) .ready (function() { $ (".btn-slide") { $ (window) .scrollTop ($ "#no") .offset(). 위로) }), }); #no는 아코디언 패널의 맨 아래에 있습니다. 이것은 발사하지 않는 것 같습니다. 올바르게 설정 했습니까? – Thomas

, 다음 scollTo plugin는 좋은 선택이다.

상관 없으면 해시를 사용하십시오. location.hash = '#someid'; 당신이 어떤 플러그인에 의존, 또는 실제 URL을 변경하지 않으려면

출처

2010-07-27 18:46:37 ScottE

그래, 내가 무엇을 찾고 정확히입니다. 나는 애니메이션에 대해별로 신경 쓰지 않는다. 아코디언이 발생했을 때 아래로 내려와야한다. 가능하다면 몇 가지 추가 플러그인을 사용하지 않는 것이 좋습니다. – Thomas

트릭은 스크롤 할 수있는 외부 container-div를 사용하는 것입니다. 이렇게하면 실제 내용을 담고있는 내부 div의 크기를 알 수 있습니다.
내 솔루션 (당신은 당신의 아코디언에 대한 몇 가지 조정을해야 할) :


<html> 
    <head> 
     <style> 
     #container { 
      overflow-y: scroll; 
      height: 200px; /* defined height */ 
     } 
     </style> 
    </head> 
    <body> 
     <div id="container"> 
     <div id="content"> 
      <!-- dynamic content --> 
     </div> 
     </div> 
    </body> 
    <script type="text/javascript" src="http://jquery.com/src/jquery-latest.js" ></script> 
    <script type="text/javascript"> 
     function onNewContent() { 
     $("#container").scrollTop($("#content").height()); 
     } 

     //test 
     $(document).ready(function() { 
     for(var i = 0; i < 500; ++i) 
      $("#content").append($("<div/>").html(i)); 
     onNewContent(); 
     }); 
    </script> 
</html>

출처

2010-07-27 20:26:09 fishbone

Jquery로 자동 스크롤 다운 하시겠습니까?

답변

관련 문제