【jQuery】自動スクロールしながら特定の要素が画面内に入ったらページ遷移

webstorageと自動スクロールを組み合わせて、ページ遷移しても自動スクロールをしつつ「次」「前」のページを選択できるようにしたときの備忘録

自動スクロールと自動で遷移するjQueryのコード

「次」「前」のボタンを押すと自動スクロールが始まって、スクロールが終わると
「次」「前」のページに自動で遷移
↓
遷移先でも「次」「前」の情報は保持して自動スクロールと自動遷移をし続ける

デモでは「次、前」のリンクはwebstorageとか動いているか確認するために同じページに設定している

実際に、以下のページで反映している

<div id="js_scrollBtn">
  <div class="next_btn btn">次<span>scroll</span></div>
  <div class="prev_btn btn">前<span>scroll</span></div>
</div>

<nav id="pagenation">
  <a href="https://twotone.me/test/3892/" rel="next">次リンク</a>
  <a href="https://twotone.me/test/3892/" rel="prev">前リンク</a>
</nav>

<script>
jQuery(function($){
var
state = false,
speed = 15,
current_pos = $(window).scrollTop(),//現在座標
window_h = $(window).height() / 2,//画面の半分の高さ
target = $('#pagenation a'),//ターゲット要素を取得
target_link = target.attr('href'),//ターゲット要素を取得
target_pos = target.offset().top - window_h,//ターゲットの位置座標
btns = $('#js_scrollBtn .btn'),//長くなるので変数化
storage = sessionStorage;// ブラウザ閉じても値を保持したいときは「localStorage」に書き換え

$('#js_scrollBtn .btn').on('click', function(){
  if(state == false){//スクロールしていない状態でボタンがactiveになっていない時
    scrollPage();
    $(this).addClass('active').siblings('div').removeClass('active');
    target_link = target.eq(btns.index(this)).attr('href');//ターゲットのhref情報更新
    storage.setItem('scroll_num', btns.index(this));//webstorageで順番を保存
    state = true;
  }else{
    if($(this).siblings('.active').length){//activeボタン以外が押された時
      $(this).addClass('active').siblings('div').removeClass('active');
      target_link = target.eq(btns.index(this)).attr('href');//ターゲットのhref情報取得
      storage.setItem('scroll_num', btns.index(this));//webstorageに順番の番号保存
      state = true;
    }else{//既にactiveのボタンが押されたとき
      scrollPage('stop');//自動スクロールを止める
      $(this).removeClass('active');
      state = false;
    }
  }
});

// 特定のURLパラメータ(クエリ文字列)を持っていたら自動スクロール発火
if(location.search.match(/auto_scroll=true/)){
  scrollPage();//自動スクロール開始
  target_link = target.eq(storage.getItem('scroll_num')).attr('href');//ターゲットのhref情報更新
  btns.eq(storage.getItem('scroll_num')).addClass('active');//webstorageに保存された順番を元にclassを追加
  state = true;
}

function scrollPage(action) {
  if(action == 'stop'){//引数に'stop'が設定されてたら自動スクロール解除
    clearTimeout(rep);
  }else{
    window.scrollBy(0,1);//1pxずつ下にずれる
    rep = setTimeout( scrollPage , speed );//変数speed秒ごとに関数を呼び出して無限ループ
    current_pos = $(window).scrollTop();//現在地の座標を更新
    if(current_pos > target_pos){//ターゲットリンクが画面内に入ったらページ遷移
      location.href = target_link +"?auto_scroll=true";// クエリ文字付けてページ遷移
      clearTimeout(rep);//処理中断しないと何度もリダイレクト処理走っちゃう
    }
  }
}
});
</script>

前回とか前々回に学んだ技術をもとに作成してるので特に書く事はないんだけど
個人的なメモとして

setTimeout( '繰り返したいもの' , 秒数 )の引数に関数を指定するときはscrollPageみたいに名前だけにしないと駄目みたい