jQuery 外部ページでもスムーズスクロールを実装する方法 – 遷移先ページの任意IDへスムーズスクロール
この記事は年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。
どうもこんばんは。Toshikuraです。今回のTipsは【jQuery 外部ページでもスムーズスクロールを実装する方法 – 遷移先ページの任意IDへスムーズスクロール】です。通常のスムーズスクロールですとページ内にアンカーを設定しjQueryにて高さ取得&スクロールという手順ですが、本記事ではページ遷移と組み合わせ遷移後に特定箇所へスムーズスクロールさせます。基本的な部分のみですのでこのままでは微妙です、参考程度にご活用ください。
実装方法
実装方法は至ってシンプルです。まずは遷移後にスクロールするサイト（ここではB.html）へのリンクをA.htmlに記述します。
HTML（A.html）
<a href="B.html?id=white">LINK</a>
<a href="B.html?id=black">LINK</a>
<a href="B.html?id=red">LINK</a>
ここでのスムーズスクロールには#リンクは使用しません。googleアナリティスクでのアクセス解析時にはイベントトラッキングを設定してみてください。次にB.htmlの設定ですが、こちらのHTMLにも特殊な記述は有りません。スクロールの動作はjQueryで実装します。
HTML（B.html）
<p id="white">
….
</p>
jQuery – 2015年12月21日更新
$(window).on(‘load’, function() {
var url = $(location).attr(‘href’);
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);
}
}
});
2015年12月21日更新）ページ読み込み時にアンカーページに大きな画像等がある場合、アンカーの高さが正しく取得できない場合がございます。上記コードではページの読み込みが完了した後スクロールアニメーションを開始するように修正しております。
jQueryの読み込みはお忘れなく。詳しくはデモをご確認ください。