4

ページの下部に表示されるスライド切り替えリンクに問題があります。事実上、ユーザーがクリックして非表示の div を表示/非表示にする必要があります (これは正常に機能します)。

問題は、ページが下にスクロールされず、非表示の div ではなく、現在表示されないことです。

JQuery初心者として、divを切り替えてページの中央に配置する方法はありますか? または、物事が複雑になりすぎないように、少なくとも下にスクロールしますか?

ありがとう

4

1 に答える 1

1

この関数を実行するには、slideToggle 呼び出しからのコールバックを使用して、scrollTop関数を使用してドキュメントのスクロールを設定することをお勧めします。オフセットを使用して、ページに対する切り替えられたコンテナーの上部の位置を取得することにより、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または同様のものを使用して、スクロールがコンテナーの上部のわずか数ピクセル上に設定されるようにすることもできますが、それはあなた次第です。要素がウィンドウの上部の境界線に突き当たるのが好きではないことがわかりました。

お尻から撮影しているため、テストケースを作成していないことをお詫びしますが、宣伝どおりに機能しない場合はお知らせください。コードを調整します.

于 2011-04-12T14:55:13.373 に答える