web-dev-qa-db-ja.com

現在のスクロール位置を取得し、リンク付きの変数として渡しますか？

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

問題は、ページをリロードしたときに上部に留まることです。以前に持っていたページの同じ位置にジャンプしたいのですが。

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

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

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

ここからどこへ行くのですか？

jqueryscrollscroll-position
18
dougoftheabaci

  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();
_
29
Georg Schölly

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

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

Page2の途中で：

<a name="myanchor">My item N</a>
2
Edemilson Lima

Gsが言ったように、ページをリロードする代わりにajax呼び出しを介して要素を追加します。

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

2
jitter

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

要素の垂直スクロールを取得および設定するためのjQueryソリューション（できれば、完全にクロスブラウザー互換ですが、まだテストしていません）は scrollTop（） です。

1
ericsoco