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

自動スクロールでページを読みつつ、読み終わったら自動でページ遷移して自動スクロールが継続される機能を作った時の備忘録

自動スクロールして特定の要素が画面内に入ったらページを遷移するコード

ボタンを押したら自動スクロール
↓
コンテンツ下部のリンクが画面内に入ったら、そのリンク先にURLパラメータ(クエリ文字列)をくっつけて自動で遷移
↓
移動先でも自動スクロールが継続される

ってのを作りたかった

<a class="target_link" href="(自動遷移先のリンク)">ターゲットリンク</a>

<script>
var
state = false,
speed = 15,
pos = window.pageYOffset,//ターゲットリンクの位置を知るための現在座標(静的)
current_pos = 0,//現在座標(動的)
window_h = parseInt(window.innerHeight)/2,//画面の半分の高さ
target = document.querySelector(".target_link"),//ターゲット要素を取得
target_link = target.getAttribute('href'),//ターゲットのhref情報取得
target_distance = target.getBoundingClientRect().top,//ターゲットまでの距離
target_pos = parseInt(pos)+parseInt(target_distance)-parseInt(window_h);//ターゲットの位置座標

document.getElementById("btn").onclick = function() {
  //↓ボタンを押した時の座標を再取得
  target_distance = target.getBoundingClientRect().top;
  pos = window.pageYOffset;
  target_pos = parseInt(pos)+parseInt(target_distance)-parseInt(window_h);


  if(state == false){
    scrollPage();
    this.classList.add('active');
    // this.className += ' active';でも可
    state = true;
  }else{
    scrollPage('stop');//自動スクロールを止める
    this.classList.remove('active');
    state = false;
  }
  // this.classList.toggle('foo-after');
  // this.classList.toggle('foo-before');
  // だけでもok
};

// 特定のURLパラメータ(クエリ文字列)を持っていたら自動スクロール発火
if(location.search.match(/auto_scroll=true/)){
  scrollPage();
  document.getElementById("btn").classList.add('active');
  state = true;
}

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

ターゲットリンクが画面内に入って半分を超えたら遷移するように指定してる

jQueryだったらoffset().topを使えば容易にターゲット要素の座標を取得できるんだけど
javascriptだけで要素の位置情報を知ろうとすると少し手間かけないといけないみたい

最上部からの要素の距離を取得するgetBoundingClientRect().topと現在のY座標を取得するwindow.pageYOffset()を足すと要素の上端までの距離が求められるみたい

その他参考サイト

個人的メモ