JavaScriptを使用してリロードした後でもスクロールバーの位置を保持します

Question

チェックボックスをクリックすると値が送信され、ページがリロードされます。さて、別のチェックボックスをクリックするには、もう一度スクロールする必要がありますが、それは良いアイデアではありません。だから、ページがリロードされた後でもスクロールバーの位置を保持したい。それを行うためにjavascriptに任意のメソッドがありますか？私は以下のコードを試しましたが、運がありませんでした。

<input type="checkbox" onclick="myFunction()"/> One <br/> 

function myFunction() { 
     document.body.scrollTop = 500px; 
     } 

私も多くのウェブサイトを閲覧しましたが、何も私のために働いていませんでした。 この問題を手伝ってください。

ありがとうございました。

Answer 1

あなたはこのように、ページがリロードされたときに戻っ位置に取得し、その後の位置を保存するためにセッションストレージを使用することができます。

$(window).scroll(function() { 
    sessionStorage.scrollTop = $(this).scrollTop(); 
}); 

$(document).ready(function() { 
    if (sessionStorage.scrollTop != "undefined") { 
    $(window).scrollTop(sessionStorage.scrollTop); 
    } 
}); 

Here is the JSFiddle demo

Answer 2

設定します（ほとんどのブラウザでdocumentElementに設定しますが、他のブラウザではbodyに設定してください）。最も簡単なことは、両方で設定することです。また、値は数値です（no px）。

しかし、あなたは、ページがおそらくsetTimeout後、あるいはonloadコールバックで、リロードした後で右の時間、でそれをしなければならない（あなたのページに働く把握する実験する必要があります）。

setTimeout(function() { 
    document.documentElement.scrollTop = 
     document.body.scrollTop = 500; 
}, 0); 

しかし、私はそれをしないだろう。ここではsetTimeout例です。代わりに、私はajaxを介してチェックボックスの値を提出し、ページをリロードしません。リロード後にユーザーがいた場所にスクロールしても、チェックボックスをオンにしたときにページがリロードされるのは驚きです（Amazonが以前に行ったことを思い出します）。 Ajaxは、ユーザーを中断することなくバックグラウンドで実行させます。

Answer 3

それが良いUI練習も文句を言いませんそのような振る舞いを作成するには、チェックボックスがオンになるとすぐにサーバーに通知する場合は、AJAXを使用してみる必要があります。または、サーバーに束として他の要素の応答を送信する場合は、単にhtml形式を使用してください。

機能を実現したい場合は、ページがリロードされるとすぐにDOM全体がリロードされるため、上記のコードは機能しません。これは、スクロールするフラグまたは値（整数）を設定できるクッキーまたはローカルストレージを使用しても達成できます。ページのロード時に、その特定のCookieまたはlocalStorage変数に値が設定されているかどうかを確認し、指定された値にスクロールします。 これはUIに関して非常に悪い習慣であることに注意してください。私は非常にajaxを使用するか、フォームを使って一緒に値を提出することをお勧めします。