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

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

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

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

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/

まとめ

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

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

Ads

関連記事

WordPress プログラミング

WordPressでサイドバーにある投稿の名称を変更する方法

2022.04.23
9
WordPress プログラミング

【簡単】contact form 7でお問い合わせ内容をkintoneに反映・連携させる方法【wordpress】

2022.03.09
144
WordPress プログラミング

WordPressでブログを始めた方必見!おすすめのプラグインを紹介します

2020.07.22
16
WordPress プログラミング

【WordPress】is_single()、is_singular()条件分岐について使い方を解説

2022.04.21
24