ページ内リンクをスムーススクロールさせる方法については、以前「jQueryを使ってページ内リンクをスムーススクロールさせる方法」という記事でご紹介いたしました。
こちらの記事では、同じページ内のアンカーリンクをスムーススクロールさせる方法ですが、今回は別のページからのアクセスでも滑らかに指定したIDまで移動させる方法をご紹介いたします。
別ページからのアクセスでもjQueryを使ってスムーススクロールさせる方法
別ページからのアクセスをスムーススクロールさせるには、以下コードを</body>の直前に追加します。
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(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}, 1000);
}
}
});
</script>jQuery本体を既にロード済みの場合は、1行目は不要です。
HTMLのアンカーリンク部分は、以下のように「?id=」でリンク先のIDを指定します。
<a href="other.html?id=target">別ページのリンク</a>
・・・
<div id="target">リンク先</div>「?id=」の値のIDがついている箇所を判定して、滑らかに移動します。
あとがき
コードをコピペで簡単に実装できますので、別ページからのアクセスでも滑らかに移動させたいという要望があったら、ぜひお試しください。