cookieを使って、ページ遷移しても直前のサイドバーのスクロール位置を継承させたい

Question

当方javascript初学者です。
現在趣味で、「縦幅が画面いっぱいのサイドバー」を実装したwebサイトを制作しております。

下記が表示例です。

#したいこと
このサイドバーの仕様を、
「ページ遷移直後、ユーザーが直前のページでスクロールした位置に移動させる」
としたい。
（レンダリングが完了した直後に自動でスクロール位置に飛ぶ挙動については許容しています）

#作成したコード

この仕様を実装する為に、
恐らくcookieという仕組みを使用する事が適切かと考え、調べながら下記のコードを作成しました。

// cookieを使う準備
// cookie値を連想配列として取得する（この関数はコピペしました）
function getCookieArray(){
  var arr = new Array();
  if(document.cookie != ''){
    var tmp = document.cookie.split('; ');
    for(var i=0;i<tmp.length;i++){
      var data = tmp[i].split('=');
      arr[data[0]] = decodeURIComponent(data[1]);
    }
  }
  return arr;
}

var arr = getCookieArray();

/* クッキーを使ってサイドバーのスクロール位置を記憶し、ページ遷移後に継承する */
$(function() {
  const $sidebar = $('.js-sidebar')
  // サイドバーをスクロールしたら
  $sidebar.on('scroll', function() {
    // 変数pos にその高さを入れる
    let pos = $(this).scrollTop();
    // 変数posをクッキーのキー「scroll」に入れる
    document.cookie = 'scroll=' + pos;
  })

　　// ロードが完了したら
  $(window).on('load',function() {
    // サイドバーのスクロール位置にクッキーのscrollを入れる
    $sidebar.scrollTop(arr["scroll"]);
  });
});

※各コメントアウトは自分の理解を表したもので、実際のコードとの認識ズレがあるかもしれません

#自己流コードの実行結果

実際に上記のコードでスクロール位置が継承される時もあります。
しかし、私が理想としている
・直前のページでのスクロール位置
ではなく
・前回そのページを訪れた時のスクロール位置
に移動しているようです。

#皆様への質問
「要素のスクロール位置をページ遷移しても継承させる」場合には、私が作成したコードをどのように改変すると良いでしょうか。

#補足
もし私が考えている方向性が最適では無い場合、その旨をご指摘頂けますと幸いです。

説明が拙い箇所や、コードの不備も複数あるかと思います。
その際は補足等致しますので、ご指摘頂けますと幸いです。

Answer 1

beforeunloadなどでページから離れる際にスクロール位置を保持してはどうでしょうか？
もしくはアンカーのクリック、フォームのサブミットに絡めるとか
直にスクロールしたときに保持するとかやりようはあると思います