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()を使えばいいらしい(メモ)

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。