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】途中からヘッダー、ナビ、サイドバー等を追従させる方法【簡単】

更新日:2022.09.09
635
jQuery

slickのcentermodeで、真ん中のスライダー要素の挙動がおかしい時の対処方法

更新日:2022.09.09
393
jQuery

【簡単】横並びブロック要素の高さを揃えるにはmatchHeight.jsを使おう

更新日:2022.09.09
248
jQuery

【簡単】slickスライダーでサムネイルを連動・固定2列2段以上で表示させる方法

更新日:2022.09.09
2731