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

StackOverflow https://stackoverflow.com/questions/1022652

  •  06-07-2019
  •  | 
  •  

質問

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

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

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

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

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

ここからどこに行きますか

役に立ちましたか？

解決

  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();

他のヒント

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

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

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

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

page2の途中のある時点で：

<a name="myanchor">My item N</a>

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

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top