リストページからリンク先にとび、リストページに戻った時にスクロール値を保持したい

Question

前提・実現したいこと

詳細ページへのリンクを設定した一覧ページを制作しています。
一覧の数が多いため、もっと見るボタンを設置しボタンを押すとさらに表示される仕様にしています。
詳細ページは同一窓で開くようにしたいです。
詳細ページには一覧ページにもどるためのリンクを設定しています。

詳細ページから、一覧ページにもどるボタンを押した時とブラウザバックで一覧に戻った時に、元のスクロール値を維持したいです。

https://teratail.com/questions/121347

こちらで解決されている方法で初期設定で表示されている一覧のリンク先はスクロール値が取れるのですが
選択タブと、もっと見るで表示されるリンクに飛んだ場合に、もっと見るを表示した状態を保持する方法がわからず困っております。

localStorageを使用しjsonで複数データの保存なども試したのですがうまくいきません、、、
javascriptは勉強中で色々な方のソースを参考に組み合わせているので
書いてる自分でももはやよくわからなくなってしまっています。
長くなってしまい分かりにくい文になってしまい恐縮ですが、良い方法があればどなたか教えてください。
よろしくお願いします。

  <div class="serchBox">
    <ul id="Tab" class="nav nav-tabs">
    	<li class="active"><a href="#tab1">tab1</a></li>
    	<li><a href="#tab2">tab2</a></li>
    	<li><a href="#tab3">tab3</a></li>
    </ul>
	</div>

    <div class="tab-content">

      <div class="tab-pane active" id="tab1">
        <div class="box"><a href="#">詳細リンク</a></div>
        <div class="box"><a href="#">詳細リンク</a></div>
        <div class="box"><a href="#">詳細リンク</a></div>
        <!-- /以下略 -->
        <div id="more_btn">もっと見る <i class="fa fa-chevron-down" aria-hidden="true"></i></div>
        <div id="close_btn">表示数を戻す <i class="fa fa-chevron-up" aria-hidden="true"></i></div>
    	</div>

      <div class="tab-pane" id="tab2">
        <div class="box"><a href="#">詳細リンク</a></div>
        <div class="box"><a href="#">詳細リンク</a></div>
        <div class="box"><a href="#">詳細リンク</a></div>
        <!-- /以下略 -->
        <div id="more_btn">もっと見る <i class="fa fa-chevron-down" aria-hidden="true"></i></div>
        <div id="close_btn">表示数を戻す <i class="fa fa-chevron-up" aria-hidden="true"></i></div>
      </div>

      <div class="tab-pane" id="tab3">
        <div class="box"><a href="#">詳細リンク</a></div>
        <div class="box"><a href="#">詳細リンク</a></div>
        <div class="box"><a href="#">詳細リンク</a></div>
        <!-- /以下略 -->
        <div id="more_btn">もっと見る <i class="fa fa-chevron-down" aria-hidden="true"></i></div>
        <div id="close_btn">表示数を戻す <i class="fa fa-chevron-up" aria-hidden="true"></i></div>
      </div>

    </div>

$(".tab-pane.active #close_btn").click(function() {
	 $(".tab-content>.active").find(".box:gt("+indexNum+")").slideUp();
	 $(this).hide();
	 $(".tab-pane.active #more_btn").show();
 });
/* ==========================================================================
   絞り込みデフォルト表示用
   ========================================================================== */
 $(function() {
   var $numberListLen = $(".tab-content>.active .box").length;
   var defaultNum = 20;
   var addNum = 8;
   var currentNum = 0;

   $(".tab-content>.active").each(function() {
     $(this).find("#more_btn").show();
     $(this).find("#close_btn").hide();
     $(this).find(".box:not(:lt("+defaultNum+"))").hide();

     currentNum = defaultNum;

     $("#more_btn").click(function() {
       currentNum += addNum;

       $(".tab-content>.active").find(".box:lt("+currentNum+")").slideDown();

       if($numberListLen <= currentNum) {
         currentNum = defaultNum;
         indexNum = currentNum - 1;

         $("#more_btn").hide();
         $("#close_btn").show();

         $("#close_btn").click(function() {
           $(".tab-content>.active").find(".box:gt("+indexNum+")").slideUp();
           $(this).hide();
           $("#more_btn").show();
         });
       }
     });
   });
 });

$('#Tab a').click(function (e) {
	e.preventDefault();
	$(this).tab('show');
});

/* ==========================================================================
   絞り込みタブ選択後表示用
   ========================================================================== */
$(function () {
$("#Tab a").click(function () {

	$(".tab-pane.active").each(function() {
  var $numberListLen = $(".tab-content>.active .box").length;
  var defaultNum = 20;
  var addNum = 8;
  var currentNum = 0;

    $(this).find("#more_btn").show();
    $(this).find("#close_btn").hide();
    $(this).find(".box:not(:lt("+defaultNum+"))").hide();

    currentNum = defaultNum;

    $(".tab-pane.active #more_btn").click(function() {
      currentNum += addNum;

      $(".tab-content>.active").find(".box:lt("+currentNum+")").slideDown();

      if($numberListLen <= currentNum) {
        currentNum = defaultNum;
        indexNum = currentNum - 1;

        $(".tab-pane.active #more_btn").hide();
        $(".tab-pane.active #close_btn").show();

        $(".tab-pane.active #close_btn").click(function() {
          $(".tab-content>.active").find(".box:gt("+indexNum+")").slideUp();
          $(this).hide();
          $(".tab-pane.active #more_btn").show();
        });
      }
    });
  });
});
});

/* ==========================================================================
   ローカルストレージ
   ========================================================================== */
$(".tab-content>.active a").click(function(){
	var scrollPos= $(document).scrollTop();
localStorage.setItem('key',scrollPos);
});
$(document).ready(function(){
var pos = localStorage.getItem('key');
$('html,body').animate({ scrollTop: pos }, 'slow');
localStorage.clear();
});

------------------------------追記------------------------------

質問の範囲が広すぎました。すみません。
・スクロール値を保持
・liのアクティブを保持
・もっと見るのカウントを保持
この３つに分けてまずは試してみようと思います！

上記のJSの下に下記を追記して、liのアクティブを保持はできたのですが、そうするともっと見るのボタンが機能せず、全件表示の状態となってしまいます。
書き方や順番など変えてみたのですがうまくいきません。。。
また、一応アクティブを保持はできているのですが似たような記述を繰り返している気がするので、もっと他に書き方などありましたら教えて頂きたいです。
よろしくお願いします。

$(window).on('click',function(){
	$("#Tab li.active a").each(function() {
		var activeli2 = $('#Tab li.active a').index('#Tab li a');
		localStorage.setItem('key',activeli2);
		console.log(activeli2 + '番目を選択');
	});
});

 $(window).on('load',function(){
   var ref = document.referrer;
   var domein = "sample.com";
   if(ref.indexOf('sample') != -1&&document.URL.match(/sample/)){
	var pos = localStorage.getItem('key');
 		console.log(pos + '番目を選択');
 		$('#Tab li').removeClass('active');
 		$('.tab-content>.tab-pane').removeClass('active');
 		$('#Tab li:eq(' + pos + ')').addClass('active');
 		$('.tab-content>.tab-pane:eq(' + pos + ')').addClass('active');

	 if(!($('.active').length)){
 		$('#Tab li').eq(0).addClass('active');
 		$('.tab-content>.tab-pane').eq(0).addClass('active');
 	 }
 		localStorage.clear();
   }
 });

Comments

[2KOH]

悪いですが、追記に関しても答えられる質問内容になっていません。
「行数が100行を超えていて、かつ書いた本人すらよくわからなくなっているコードの中からバグを見つけてくれ」と言われても、少なくとも自分はやりたくありません。

回答がほしいなら、わからないことを順番に尋ねていくのではなく、わからないところを本題でない部分を全部削ぎ落としてこれ以上小さくできないところまで小さくした上で尋ねてください。
それができないなら、100行を超えているスパゲッティコードの中から無償でバグを見つけてくれるような奇特な人が現れるのを気長に待つか、このサイトで回答を得るのは諦めてください。

[mugichan]

ですよね。
私も依頼される側だったら答えにくいだろうなと思いつつ自力では難しそうだったので何かヒントをもらえたらと思って質問してみたのですが、そんなに不快にさせてしまったのならすみません。
localstoragで何度か何度か試したのですがもう一歩という感じの所まで来たので何とかなりそうです！
この方法でいけそうと教えて頂いただけでもだいぶ進んだのでよかったです！
次回質問するときは、もっとわかりやすく要約するように気を付けます。
ありがとうございました！

Answer 1

やり方としては localStorage を使う方法で実現可能だと思います。

1. 詳細ページに飛ぶ前に、どれだけもっと見るボタンが押されたかの値を localStorage に保存する。
2. 一覧ページを表示するときに、localStorage からどれだけもっと見るボタンが押されたかの値を取得し、その値を元にもっと見るを表示した状態を復元する。

これ以上の具体的な方法は、この質問では答えられません。
具体的なサンプルコードを書くには質問範囲が広すぎて完全に丸投げ状態ですし、書いた本人ですらわからなくなっているようなコードを元にサンプルコードを書くというのも無茶です。

答えられる内容で質問し直してください。

あと、コード部分は markdown記法を使ってください。

Comments

[mugichan]

markdown記法というものがあるのですね。markdown記法に修正しました。教えて頂きありがとうございます！