4

.slidingDiv と呼ばれるサイトがあります。アンカー .show_hide をクリックすると表示され、スライドダウンします。これは、ページ上の唯一のコンテンツである場合に最適です。

この div の上に他のコンテンツがある場合、スクロールダウンして表示されません。代わりに div が表示されますが、サイト外にあるため、実際には機能しますが、残りのコンテンツを押し上げるわけではありません。

JQuery は次のとおりです。

<script type="text/javascript">

$(document).ready(function(){

        $(".slidingDiv").hide();
        $(".show_hide").show();

    $('.show_hide').click(function(){
    $(".slidingDiv").slideToggle(), 1000;
    scrollTop: $(this).offset().top
    });

});

</script>

どうもありがとう

ピート

4

2 に答える 2

9

scrollTop関数のコールバックで設定slideToggleするか、slideToggle関数が呼び出された後に (実行したように)、せいぜい動作が不安定になります。スムーズなアニメーションを探している場合は、スライドを開始してanimateからページを下にスクロールすることをお勧めします。これは、このfiddleによって示されます。ここにjsがあります：

$(document).ready(function() {
  $(".slidingDiv").hide();
  $(".show_hide").show();

  $('.show_hide').click(function() {
    $(".slidingDiv").slideToggle(1000);
    $('html, body').animate({
      scrollTop: $(".slidingDiv").offset().top + $('window').height()
    }, 2000);
  });
});​
于 2012-12-14T14:27:35.677 に答える