jQuery スクロールでURLを書き換える

URLを書き換えるJSを、スクロールで移動したコンテンツの位置をトリガーに発動させるサンプルです。

記事などのコンテンツで、スクロールして下まで読み切ると、次の記事が表示されるサイトがあります。

今時は通信速度が速く、ついついたくさん読ませるためのテクニックの一つです。

一方で、最終的にはとても長いページになり、リンク押して戻ると最初に戻っていたり、途中のコンテンツへの直接リンクが貼れなかったり、悩み事があります。

そこで考えられたのが以下のような処理です。

URL変更しないエリア

例：最初の記事のページ

すぐに次のコンテンツが出ないよう長めに余白を取っています

このエリアの先頭がブラウザの中央を超えるとURLを「/URL1」に書き換える

例：次の記事のページを動的に読み込み、URLを変えたい場合など

このエリアの先頭がブラウザの中央を超えるとURLを「/URL2」に書き換える

例：次の次のページで、さらにURLを変えたい時など

元のURLを覚えておいて、設定がない場合、元のURLに戻す

例：なんだかんだフッターなどまでスクロールして、結局最初のURLにしたい時など

このサンプルは、URLを変えてさらに履歴へ書き込むJSで実装されています。

history.pushState('','',set_url);

ただ、URLを変えたいだけの場合はこちら

history.replaceState('','',set_url);

この処理のJSはこちら

var posi_top,wih_half,current_view,set_url,set_url_old;
var now_url = location.pathname;

$(window).load(function(){
	var wih = window.innerHeight;
	var wih_half = wih/2;
	current_view = wih_half;
	set_posi();
});

$(window).scroll(function(){
	var wih = window.innerHeight;
	var wih_half = wih/2;
	current_view = $(this).scrollTop() + wih_half;
	set_posi();
});


function set_posi(){

	$('.demo_url_replacer').each(function() {
		var posi = $(this).offset();
		posi_top = posi.top;
		posi_bottom = posi_top+$(this).height();

		//画面真ん中が要素の上部の位置を超過かつ、要素の下部未満の場合URL変更。
		if(current_view > posi_top && current_view < posi_bottom){
			set_url_old = set_url;
			if($(this).attr("data-url")){
				set_url = $(this).attr("data-url");
			}else{
				set_url = now_url;
			}
			if(set_url!==set_url_old){
				//ただ書き換える処理
				//history.replaceState('','',set_url);
				//履歴に書き込む処理
				history.pushState('','',set_url);
			}
		}
	});
}

LINEでシェア

公開 2019-07-29 20:32:02

このページの二次元コード

jQuery スクロールでURLを書き換える

同じカテゴリーのサンプル

人気のサンプル