ページ内リンクで特定の場所までスムーススクロールさせる方法。ヘッダー固定の場合も対応可能！

仙台・宮城の皆さんこんにちは！

今日はページ内リンクで特定の場所までスムーススクロールさせる方法について解説します。

当サイトも利用してますが、「ページトップ」や「記事の目次」などでよく利用するすることになりますね。

基本的なスクリプト

これが基本的なJavaScriptです。2行目の$('a[href^="#"]').click(function()に注目してください。

これは「先頭に#のついたaタグがクリックされたら…」という命令になります。


$(function(){
  $('a[href^="#"]').click(function(){
    //スクロールのスピード
    var speed = 500;
    //リンク元を取得
    var href= $(this).attr("href");
    //リンク先を取得
    var target = $(href == "#" || href == "" ? 'html' : href);
    //リンク先までの距離を取得
    var position = target.offset().top;
    //スムーススクロール
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

htmlは以下のような感じで先頭に#をつけてdivタグの名前を設定すれば、いいだけです。


<div id="header">ヘッダー</div>

略

<div id="footer">
<a href="#header">トップに戻る</a>
</div>

もちろんブラウザの一番上に戻る時だけ使うだけじゃありません。
目次などで、ページ内の途中にスクロールさせる場合でも、使用することができます。


<div id="mokuji">
<ul>
    <li><a href="#contents1">コンテンツ1</a></li>
    <li><a href="#contents2">コンテンツ2</a></li>
    <li><a href="#contents3">コンテンツ3</a></li>
</ul>
</div>   
    
<div id="contents1">
コンテンツ1の内容
</div>
   
<div id="contents2">
コンテンツ1の内容
</div>
     
<div id="contents3">
コンテンツ1の内容
</div>

ヘッダーが固定の場合

当サイトもそうですが、ヘッダーが固定して表示される場合は上記の方法だと、先頭の部分がヘッダーと重なって隠れてしまいます。

ということは、ヘッダーの高さを引いて距離を取得する必要があります。


$(function(){
  $('a[href^="#"]').click(function(){
    var speed = 500;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    //ヘッダーの高さを取得
    var header = $('header').height();
    //ヘッダーの高さを引く
    var position = target.offset().top - header;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

9行目でpositionに目標を代入する際にtarget.offset().top – headerでヘッダーの高さを引いてから代入しています。