【初心者でもわかる】ふわっと動く、ページ内リンクの作り方

どうも7noteです。クリックしたら同じページ内でふわっと自動スクロールさせて任意の場所に移動させる方法

この記事では実際に導入する時に自分が躓いた点や気づいた点をまとめました。
クリック（タップ）すると、同ページ内で任意の場所にスクロールさせるのを「ページ内スクロール」と言います。

HTMLだけで書くなら、こんなかんじで書きます。

index.html

<ul>
  <li><a href="#item01">項目１へリンク</a></li>
  <li><a href="#item02">項目２へリンク</a></li>
</ul>

<!-- ～中略～ -->

<h2 id="item01">項目１</h2>

<!-- ～中略～ -->

<h2 id="item02">項目２</h2>

<!-- ～中略～ -->

これでページ内リンクが実装できました。
クリックする要素をaタグで囲み、href属性にはとび先のid名を#付きで記述するだけです。
これはidでのみ動作し、classでは動かないので注意してください。

動作はするが、、、
ただ、これではあまりにも機械的すぎる！

ページもバッと瞬時に切り替わるし、上に動いたのか下に動いたのかも分からないような状態。
では、スクロールをもっとスムーズにしましょう。

ふわっとスムーズにスクロールしてページ内リンクさせる方法

※jQueryを使用しています。jQueryってなんだ？という方はこちら

script.js

$(function(){
  $('a[href^="#"]').click(function() {     /* リンク先が#から始まる時 */
    var speed = 400;                     /* スクロールにかける時間を設定 */
    var href = $(this).attr("href");     /* hrefの内容を取得 */
    var target = $(href == "#" ? 'html' : href);  /* hrefが#だけだった場合、htmlに置き換えて、そうでない場合はhrefの値をtargetに格納 */
    var position = target.offset().top;  /* 飛び先のIDの上からの位置を取得 */
    $('body,html').animate({scrollTop:position}, speed, 'swing'); /* cssのアニメーションを使ってスクロールさせる */
    return false;
  });
});

上のスクリプトを追加することで、ふわっとスクロールすることができます。

しかし、これだけではまだ問題が出る場合も・・・

固定ヘッダーと一緒に利用すると、かぶってしまって見出しが見えなくなるかもしれません！

失敗例

これを対策するために、以下の部分に1行追加します。

script.js

$(function(){
  $('a[href^="#"]').click(function() {
    var speed = 400;
    var href = $(this).attr("href");
    var target = $(href == "#" ? 'html' : href);
    var position = target.offset().top;

    /* この行を追加 */
    position -= 75; /* ヘッダーの高さ分のpxをマイナスする */

    $('body,html').animate({scrollTop:position}, speed, 'swing');
    return false;
  });
});

これによって、隠れてしまう見出しより少し上までしかスクロールしないので、上部固定ヘッダーがあっても問題なくスクロールすることができます。

まとめ

HTMLだけでページ内スクロールさせるのは何も難しいことはありません。

しかし、ふわっと動かしたりスムーズに動かしたり、はたまた固定ヘッダーがあるページでページ内リンクを入れるとなると工夫が必要です。
でもページ内リンクの方法は他にも多く記事が出ているので、参考になるサイトややり方を調べて実装できるので、実装自体はそこまでハードルの高いものではないかなと思います。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ