web関連
【jQuery】スクロールして指定したリンクが画面内に入ったら自動でリンク先に遷移
ブログサイトに自動スクロール&自動ページ遷移機能を実装したかった時の備忘録
今回はスクロールして該当のリンクがあったら自動でページ遷移する機能を実装する
スクロールして指定したリンクがあったら自動遷移するソースコード
<a id="target" href="リダイレクト先">ターゲットリンク</a>
<script>
$(window).scroll(function(){
var t = $('#target').offset().top; // ターゲットの位置取得
var p = t - $(window).height(); // 画面下部からのターゲットの位置
if($(window).scrollTop() > p){// 画面内に要素が入った時
setTimeout(function(){ // 画面内に入って5秒後に遷移
var link = $('#target').attr('href');// リンクのhrefを取得
location.href = link +"?auto_scroll=true";// クエリ文字付けてページ遷移
},5000);
}else{// 画面内に要素が入ってない時
}
});
</script>
クエリ文字付けてるのは、URLがこのパラメータ持っていたら自動スクロールを継続するようにしようと思って書いてるからいらなければ消して
▼参考
履歴を残さないでリダイレクトさせるならlocation.replace()を使えばいいらしい(メモ)
今回一番下のターゲットとなるリンクが画面内に入るとこのページに戻ってくるように書いてる