他ページへのリンク・遷移した時にページ内リンクを指定しスムーススクロールさせる方法・手順+遷移後のズレへの対処

基本的にはこちらなどで紹介されているソースを基本的に使いましたが、キャッシュが影響してかなにか原因が分かりませんが、2回目以降に遷移時の位置がズレるという現象に遭遇しました。

このズレることへの対処は読み込み後に”setTimeout”で時間を一瞬置いてから作動させることでなんとかごまかしました。

原因が掴みきれないので根本的な解決ではないですが、回避法として下記に記録します。

遷移元ソース

“?id”で値を次ページに渡します。遷移後のターゲットのidを指定します。

<a href="http://ページパス?id=idnonamae">リンク</a>

遷移後のページ

jQuery部

jQuery本体の読み込みを忘れずに!

<script>
//▼別ページからの遷移時にスムーススクロール(?id=で指定)
$(window).on('load', function() {
    var url = $(location).attr('href');	//ロード後少し時間を置く
    setTimeout(function(){
	    if(url.indexOf("?id=") != -1){
	        var id = url.split("?id=");
	        var $target = $('#' + id[id.length - 1]);
	        if($target.length){
	            var pos = $target.offset().top;
	            $("html, body").animate({scrollTop:pos}, 1500);
	        }
	    }
    },100);
});
</script>

html部

リンクで飛ぶ先(受ける場所)です。id名はなんでも良いです。

<div id="idnonamae">
	<p>要素サンプル</p>
</div>

以上です。

  • このエントリーをはてなブックマークに追加
スポンサーリンク
スポンサーリンク