別ページのアンカーリンクでもjQueryを使ってスムーススクロールさせる方法

別ページのアンカーリンクでもjQueryを使ってスムーススクロールさせる方法

別ページのアンカーリンクでもjQueryを使ってスムーススクロールさせる方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • Youtube動画変換・ダウンロードおk!
  • このエントリーをはてなブックマークに追加

ページ内リンクをスムーススクロールさせる方法については、以前「jQueryを使ってページ内リンクをスムーススクロールさせる方法」という記事でご紹介いたしました。こちらの記事では、同じページ内のアンカーリンクをスムーススクロールさせる方法ですが、今回は別のページへのアンカーリンクも滑らかに移動させる方法をご紹介いたします。

スポンサードリンク

別ページのアンカーリンクでもjQueryを使ってスムーススクロールさせる方法

別ページのアンカーリンクもスムーススクロールさせるには、以下コードを</body>の直前に追加します。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(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}, 1000);
}
}
});
</script>

jQuery本体を既にロード済みの場合は、1行目は不要です。

HTMLのアンカーリンク部分は、以下のように「?id=」でリンク先のIDを指定します。

<a href="other.html?id=target">別ページのアンカーリンク</a>
・・・
<div id="target">リンク先</div>

「?id=」の値のIDがついている箇所を判定して、滑らかに移動します。

あとがき

コードをコピペで簡単に実装できますので、別ページのアンカーリンクも滑らかに移動させたいという要望があったら、ぜひお試しください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。