ウィンドウのスクロール位置をjs+Cookieで保存する

ページをまたいだ場合、ページでリロードを行う処理をする場合に表示位置を固定したい場合に用いる。

記述例）Cookieを保存するjsにより、変数指定が若干変わる。下記はそれぞれ案件に併せて若干修正済。
■https://github.com/js-cookie/js-cookie を使用する場合

<script>
$(function(){
    var key = 'keep-position-'+location.pathname;
    // Cookieに値があればスクロール＋Cookieをリセット
    if($.cookie(key)){
      setTimeout(function(){
        $(window).scrollTop($.cookie(key));
        $.removeCookie(key);
      },400);
    }
    // クリックで発火
    $(document).on('click', '.wpfp-link', function(){
      keepPosition();
    });
    // スクロール位置をCookieに保存
    function keepPosition(){
      $.cookie(key, $(window).scrollTop(), { expires: 1 });
    }
});
</script>

■https://github.com/carhartl/jquery-cookie を使用する場合

<script>
$(function(){
    // Cookieに値があればスクロール＋Cookieをリセット
    if($.cookie("SCROLL")){
      setTimeout(function(){
        $(window).scrollTop($.cookie("SCROLL"));
        $.removeCookie($.cookie("SCROLL"));
      },200);
    }
    // クリックで発火
    $(document).on('click', '.wpfp-link', function(){
      keepPosition();
    });
    // スクロール位置をCookieに保存
    function keepPosition(){
      $.cookie("SCROLL", $(window).scrollTop(), { expires: 1 });
    }
});
</script>

◯ページ固有のcookieを記録したい

// ページ番号
var Num = window.location.pathname.split('/')[3]
// 全体パス
var p = window.location.pathname.replace(new RegExp("(?:\\\/+[^\\\/]*){0,1}$"), "/");
Cookies.set(Num,Num,{ path: p });

◯ページ遷移した時に高さを保持

$('#btn').click(function() {
  keepPosition();
});
var key = 'keep-position-'+location.pathname;
function keepPosition(){
  Cookies.set(key, $(window).scrollTop());
}
if(Cookies.get(key)){
  setTimeout(function(){
    $(window).scrollTop($.cookie(key));
    Cookies.remove(key);
  },0);
}

◯パラメータごとでの判定

// パラメータ取得
var params = [];
var param = location.search.substring(1).split('&');
for(var i = 0; i < param.length; i++) {
    params[i] = param[i].split('=');
}
var target = 'name';
var value;
for(var i = 0; i < params.length; i++) {
    if(params[i][0] == target) {
        value = params[i][1];
        break;
    }
}
switch (value) {
    case 'aaaa':
        Cookies.set('param1','aaaa');
    break;
    case 'bbbb':
        Cookies.set('param2','bbbb');
    break;
    case 'cccc':
        Cookies.set('param3','cccc');
    break;
}

◯json（配列）使うのやりたい

var obj = {
    a : 'aaa',
    b : 'bbb',
    c : 'ccc'
}
Cookies.set('json',JSON.stringify(obj));
var read_obj = JSON.parse(Cookies.get('json'));
console.log(read_obj);

参考サイト

やまろぐはてな

cookieとかを使ってjsで云々

http://yamanoku.hatenablog.com/entry/2016/08/02/cookie%E3%81%A8%E3%81%8B%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6js%E3%81%A7%E4%BA%91%E3%80%85

Tips Note by TAM

jQueryプラグイン「jquery.cookie.js」でcookieを簡単に扱う

https://www.tam-tam.co.jp/tipsnote/javascript/post3109.html