Written by Kasumi

【簡単】別ページのアンカーリンクでもスムーズスクロールさせる方法

ページ内アンカーリンクでスムーズスクロールを実装したが、別ページのアンカーリンクに飛んだ時も、スムーズスクロールさせたい!

このような疑問に回答します。

本記事では別ページでも、アンカーリンクへスムーズスクロールさせる方法について解説します。

script内に以下ソースを記述

$(function () {
    // 別ページの場合は以下
  var urlHash = location.hash;
  if (urlHash) {
    $('body,html').stop().scrollTop(0);
    setTimeout(function(){
      // ヘッダー固定の場合はヘッダーの高さを数値で入れる、固定でない場合は0
      var headerHight = 0;
      var target = $(urlHash);
      var position = target.offset().top - headerHight;
      $('body,html').stop().animate({scrollTop:position}, 400);
  }, 100);
}
});

上記ソースをscript内にコピペしましょう。

これだけで別ページのアンカーリンクもスムーズスクロールしてくれます。

通常のページ内リンクと違う点としては以下部分になります。

var urlHash = location.hash;
if (urlHash) {
var target = $(urlHash);
var position = target.offset().top - headerHight;
$('body,html').stop().animate({scrollTop:position}, 400);
}

上記ソース部分のlacation.hashとif文で、リンクにアンカーがあるかどうがを判別。ある場合はページトップからアンカーまでをスムーズスクロールさせる、というものです。

スムーズスクロールの実装に関して、詳しい詳細は以下記事を参照↓
https://kasumiblog.org/smooth-scroll/

まとめ

別ページのアンカーリンクではスムーズスクロールが動かない。。という事象が結構ありました。
同じお悩みの方で、本記事を参考にしていただくと幸いです。

以上で解説を終わります。

目次

関連記事

jQuery

jQueryのdatetimepickerで選択した日付によって時間を変更する方法

更新日:2022.09.09
720
jQuery

jQueryでhtml要素の読み込み完了後にイベントを実行する方法

更新日:2022.09.09
2300
HTMLCSS jQuery

【簡単CSS・jQuery】左から右に流れるようなテキストアニメーションを実装する方法

更新日:2022.09.09
2694
jQuery

スムーズスクロール機能をjavascript(jquery)を使用し実装する方法

更新日:2022.09.09
1425