.slideToggle 자동 스크롤 내가 패널을 엽니 다 .slideToggle을 사용하고 내용

을 공개합니다 스프레드 시트가 포함 된 div가 표시됩니다. div가 토글되면 세로 스크롤 막대가 자동으로 아래로 스크롤하여 새 콘텐츠를 표시하도록하고 싶습니다. 나는 아마 이것을 할 수 있다고 생각합니다 .scrollTop이 일어날 수 있지만 어떻게에 대해 같은 시간에 일어날 수 있는지 모르겠다 ... 어떤 아이디어?.slideToggle 자동 스크롤 내가 패널을 엽니 다 .slideToggle을 사용하고 내용

편집 : 이 내가 설명 무엇을 달성 대해 갈 수있는 가장 좋은 방법이라고 합의가있는 것 같습니다 :

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".btn-slide").click(function(){ 
     var $panel = $("#panel"); 
     $panel.slideToggle("slow"); 
     if ($panel.is(':visible')){ 
      $panel.parent().scrollTop($panel.height()-$panel.parent().height()); 
     } 
     $(this).toggleClass("active"); 

     return false; 
    }); 
}); 
</script>

이 패널의 슬라이드를 만들지 만 스크롤 아래로 효과가 작동하지 않습니다 ..

$(".btn-slide").click(function(event){ 

    if ($(this).hasClass("active")) 
    { 
     $(this).removeClass("active"); 
     $("#panel").slideUp("slow"); 
    } 
    else 
    { 
     $(this).addClass("active"); 
     $("#panel").slideDown("slow"); 

     var destination = $("#container ").offset().top + $("#container").height(); 


     $("#container").animate({ scrollTop: destination},"slow"); 
     //or 
     //$("#container").animate({ scrollTop: destination},"slow", "fx_name_here"); 

    } 


    event.preventDefault(); 
});

HTML : : 내가 전에 이런 일을 한 적이

출처

2010-07-29 Thomas

이것이 이해가되지 않는다면 알려주세요. 다시 작성할 수 있습니다. 해결해야합니다. - 감사합니다! – Thomas

이 게시물에서 해결책을 찾으십시오. http://stackoverflow.com/questions/270612/scroll-to-bottom-of-div var panelDiv = document.getElementById ("panel"); panelDiv.scrollTop = panelDiv.scrollHeight; –

누군가 비슷한 것을 제안했지만 두 가지 효과가 모두 발동되지는 않습니다. 패널 만 슬라이드합니다. – Thomas

<a href="#" class="btn-slide">Fire Panel</a> 
<div id="container"> 
    <div id="panel">sdfsdfsdfs</div> 
</div>

도움이 될만한가?

편집 :

당신이 jQuery Easing Plugin 당신이 (답 라인을 주석) 코드로 FX 이름을 추가, 슬라이딩에 다양한 효과를 추가 할 수 있습니다 다운로드하는 경우

적은 코드가 있도록 개선 된 코드 만 같은 효과.

출처

2010-07-29 07:15:20

내가 찾고있는 것 같지만 제대로 작동하지 않는 것 같습니다. http://jsfiddle.net/xmTCs/7/ – Thomas

내 대답이 업데이트되었습니다. 그것을 테스트하고 나를 위해 잘 작동합니다. –

그래, 방금이 패널 슬라이드가 작동하지만 아래로 스크롤 효과가 작동하지 않는 것 같습니다. – Thomas

.slideToggle 자동 스크롤 내가 패널을 엽니 다 .slideToggle을 사용하고 내용

답변

관련 문제