19

正直なところ、私はここで自分の深さから抜け出しています。リンクをクリックするとページがリロードされ、特定の数のリスト項目が順不同のリストに表示されるページネーション システムを作成しました。もう一度クリックすると、ページがリロードされ、より多くのアイテムが表示されます。Twitter がフィード内のツイートをどのように表示するかを考えてみてください。

問題は、ページをリロードすると、ページが一番上にとどまることです。私が望むのは、以前のページの同じ位置にジャンプすることです。

私はすでにリンクのセレクターをうまく設定していますが、現在のスクロール位置を取得し、それを新しいページに渡してジャンプする方法がわかりません。

これまでの私のコードは次のとおりです。

jQuery(document).ready(function(){
    $("a[rel=more]").live("click", function(){
        //script...
    });
});

ここからどこへ行けばいいですか？

4

4 に答える 4

30

  1. ページ全体をリロードする代わりに、AJAXを使用してアイテムをリロードします。

  2. window.pageYOffsetおよびを使用してスクロール位置を取得および設定しますwindow.scrollTo(0, y)。

    URLのハッシュに位置を保存します：

    // after loading the document, scroll to the right position
// maybe location.hash has to be converted to a number first
$(document).ready(function() {
    window.scrollTo(0, location.hash);
});

// I'm not quite sure if reload() does preserve the hash tag.
location.hash = window.pageYOffset;
location.reload();
于 2009-06-20T22:23:11.123 に答える
2

必要なのは、リンクの最後にHTMLアンカーを渡すことだけだと思います。ブラウザは、一致したアンカーのすぐ隣の要素まで自動的にスクロールします。例：

<a href="page2.html#myanchor">Next page</a>

page2の途中のある時点で：

<a name="myanchor">My item N</a>
于 2012-10-12T04:45:58.057 に答える
2

gsが言ったように、ページをリロードするのではなく、ajax呼び出しを介して要素を追加します。

jQuery.ScrollToプラグインを使用したくない場合。これは、あなたが夢見ていたスクロールに関連するすべてをサポートします

于 2009-06-20T22:29:32.357 に答える
1

@Shawn Grigson のリンクによると、pageYOffset はすべてのブラウザーで同じようにサポートされているわけではありません。

要素の垂直スクロールを取得および設定するためのjQueryソリューション（まだテストしていませんが、本当にクロスブラウザ互換であることを願っています）はscrollTop()です。

于 2011-06-16T06:54:14.980 に答える