スクロール位置を保存して、戻ってきた時に元のスクロール位置を表示したい

###前提・実現したいこと

トップページに画像一覧があり、画像をクリックすると下層ページ（その画像の詳細説明ページ）に遷移します。

下層ページには「トップページへ戻るボタン」があり、
トップページに戻った際、遷移前のスクロール位置で表示される様にしたいと思っておりますが
考えてみた下記のソースコードでは作動せず、ページの先頭が表示されてしまいます。

元のスクロール位置を表示するにはどうしたら良いでしょうか。
お教え頂けたら幸いです。よろしくお願い致します。

【補足】
※トップページの画像一覧は、jQueryで絞り込み検索をかけた結果の表示となっています。
※元のスクロール位置を表示したいのはトップページのみの為、「$('img').click(function(){〜」としました。

###該当のソースコード

javascript
1$(function() {
2	$('img').click(function(){
3		var scrtop = $(window).scrollTop(); //位置を保存
4	});
5	$(window).load(function(){
6		if(scrtop){　//
7			window.scrollTo( 0 , scrtop );
8		}
9	});
10});

###ご回答をもとに解決したコード

javascript
1$("img").click(function(){
2   	var scrollPos= $(document).scrollTop();
3	localStorage.setItem('key',scrollPos);
4});
5$(document).ready(function(){
6	var pos = localStorage.getItem('key');
7	$('html,body').animate({ scrollTop: pos }, 'slow');
8	localStorage.clear();
9});
10

行動規範の内容に同意します

回答2件

ベストアンサー

変数はあくまで実行しているスクリプト内でのみ有効なものであり、画面遷移した場合、保持しません。
同ページであっても例えばF5で画面更新した場合も、初期値から、となります。

ページ遷移後も保持したいのであればWeb Storageをお使いください。

投稿2018/04/11 06:32

m.ts10806

総合スコア80850

alpaca540

2018/04/11 07:10

画面遷移すると、データ保持できないのですね…。 WebStorage、教えて下さりありがとございます。こちらを使って再度トライしてみます！

m.ts10806

2018/04/11 07:13

そうですね。なんだかんだでjavascriptも「静的」なんですよね。「画面遷移（F5画面更新もそうですが）してしまうと画面情報を最初から読み込む」という解釈が一番理解しやすいと思います。維持しようと思ったら画面以外で共有できるどこかに保存しなければならないわけです。

alpaca540

2018/04/11 07:46

画面遷移した場合は、画面情報を最初から読み込む…という考え方とてもわかりやすいです。最初に頂いたご回答とともに、おかげさまで概念が理解できました。（再度トライしてみたところ…いまだ作動せずなのですが引き続き考えてみます。）ありがとうございました！ありがとうございました。

m.ts10806

2018/04/11 07:55

ひとまず解決に向かえてそうで何よりです。 set,getさえうまくいけば大丈夫なはずですが、また詰まってしまったときは質問あげてください。

行動規範の内容に同意します

その書き方だと変数に入れたものはページをまたいで保存されません。

ですので、値をどうにかして保存して使えるようにする必要があります。

基本的には下記の記事がページ遷移後のスクロールのやり方で参考になります。
・ページ遷移後にスムーススクロール
http://mksk.hatenadiary.com/entry/2016/09/09/230911

値を保存する方法としては例えばjQuey.cookie.jsを使ってcookieを利用したり、
下記のようにlocalstrageを利用したります。
・ローカルストレージの使い方
http://webliker.info/how-to-use-localstrage/

もしくはphpも使ってURLにハッシュ値を受け渡し、$_GETで受け取る方法も使えます。
・javascriptとphpでの変数の受け渡し
http://www.searchlight8.com/php-javascript-params/

jQuery
1$(function() {
2    $('img').click(function(){
3        var scrtop = $(window).scrollTop(); //位置を保存
4        ※例えばここでscrtopをlocalstrageに保存したりして、
5    });
6    $(window).load(function(){
7        ※ここでscrapにlocalstrageから値を取得して代入する
8        if(scrtop){
9            window.scrollTo( 0 , scrtop );
10        }
11    });
12});