1

次のjQueryスニペットがあります

$('html, body').animate({
    scrollTop: 178
}, 2000);

ページの下部にいくつかのページネーション ボタンがあり、クリックすると JavaScript 関数がトリガーされます。この JS 関数では、上記のスニペットが呼び出されます。

これは、ページをメニューのすぐ上にスクロールして戻すのに問題なく機能しますが、まず最初に、ページが突然一番下にジャンプしたように見えます (既に一番下にいる場合を除きます)。

私はこの振る舞いを理解しようとして髪を引き裂いています。

サイトへのリンクを提供する以外に、それを説明する方法がわかりません：http://tinyurl.com/apdloyl

結果が読み込まれたら、ページの一番下に移動し、少し上にスクロールしてから、[次のページ] ボタンをクリックします。そして、スクロールアップする前にページがジャンプダウンすると、奇妙なことが起こります.

助けてくれてありがとう。

4

2 に答える 2

2

oncemade.com の記事から何かをピックアップしました。

$('html:not(:animated),body:not(:animated)').animate(...);

例: http://jsfiddle.net/ddthK/1/

編集：

提供されたリンクをもう少し調べた後、グリッチを引き起こしている可能性のある別のことがあります. スクロールをアニメーション化する前に、結果が完全に読み込まれるまで待ってください。私からすれば、長く待つ必要はありません。または、最初にスクロールしてからコンテンツをリロードし、スクロールする前に読み込みスピナーを設定することもできます。説明すると、スクロール中にページサイズが変化することが原因だと思います。

于 2013-01-03T01:01:13.570 に答える
0

だから私の解決策は次のとおりでした

CSS で高さが「auto」に設定された #main コンテナ div がありました。

ページネーション ボタンが押されると、この div のコンテンツが消去され、ajax を介して新しいコンテンツに置き換えられました。

コンテンツが削除されると、ブラウザー ウィンドウが縮小し、その結果、常にページの下部にぶつかっていました。

私の修正は、divの高さをすぐに取得し、固定形式で現在の高さに設定し、一番上までスクロールしてから、スクロールバックが完了したらdivの高さを自動にリセットすることでした。

何かのようなもの：

/* First we have to fix the height of the #main element to prevent a nasty looking jerk                      when the ajax content dissapears */
var height = $('#main').height();
$('#main').height(height);

/* Then we can scroll to the top */
$('html, body').animate({
scrollTop: 178
}, 2000, function() {

    /* Then reset height to auto */
    $('#main').css('height','auto');

});

おそらく他のよりエレガントな方法がありますが、これは私にとってはうまくいきます

于 2013-01-03T09:23:43.570 に答える