【簡単】別ページのアンカーリンクでもスムーズスクロールさせる方法
ページ内アンカーリンクでスムーズスクロールを実装したが、別ページのアンカーリンクに飛んだ時も、スムーズスクロールさせたい！
このような疑問に回答します。
本記事では別ページでも、アンカーリンクへスムーズスクロールさせる方法について解説します。
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/
まとめ
別ページのアンカーリンクではスムーズスクロールが動かない。。という事象が結構ありました。
同じお悩みの方で、本記事を参考にしていただくと幸いです。
以上で解説を終わります。
目次
