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

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

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


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

ページ内リンクをスムーススクロールさせる方法については、以前「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 で
スポンサードリンク

関連記事

コメントを残す

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