jQueryのSlideToggleと私は私のページの下部に表示されますslidetoggleリンクに問題を抱えている

Question

をスクロールします。 効果的に私は、ユーザーが（正常に動作します）隠しDIVを表示/非表示する]をクリックします

問題は、ページがjQueryの初心者として、今、隠されていないのdiv

を表示するにはスクロールダウンしていないですdivをトグルしてページの中央に配置する方法はありますか？あるいは、物事が複雑すぎることなく、少なくとも下にスクロールしますか？この機能を実行するために

おかげ

Answer 1

は、私がscrollTop機能を使用して、ドキュメントのスクロールを設定するには、あなたのslideToggle呼び出しからのコールバックを使用してお勧めします。あなたは、ページに対する切り替えコンテナの先頭位置を取得するためにoffsetを使用してscrollTopスプライトセッターに値を決定することができるでしょう。私はスクロールの動作を、要素が表示されているときにのみ非表示にするように制限することを推奨します。一般的に

、直接ページスクロールを設定すると、やや耳障りUXすることができます。そのため、私は実際にscrollTopスプライト機能を使用してscrollTopスプライトではなく、まっすぐセット、それをアニメーション化あなたのコードを与えるつもりだが、このアプローチは、scrollTopスプライトへの直接呼び出しが均等にページを配置しますよう必要はありません。私はちょうどユーザーとして私はむしろ突然の位置の変化ではなく、徐々にスクロールすると思います。

コードは、例えば、形を取る：

$(".myShowHideLink").click(function() { 
    $(".myToggleContainer").slideToggle("slow", function() { 
     if ($(this).is(":visible")) { 
      $(document).animate({ 
       scrollTop: $(this).offset().top 
      }, "slow") 
     } 
    }); 
}); 

あなたが実際にスクロールの設定だけで数ピクセルの容器の上部より上そう$(this).offset().top - 50または類似のものを使用することもできますが、それは最高ですあなたへ。私は自分の要素が窓の上の境界線に突き当たるのが好きではないことを知ります。

私は腰から撮影してるように私は、このためのテストケースを作成していない謝罪はなく、宣伝通りに動作しない場合、私に知らせて、私は、コードを調整します。お返事のための