【jQuery】ページ内リンクをスクロールにする方法

2020-04-08

jQueryを使用して、ページ内リンクをスクロールさせる方法について記載していきます。

使用されるケース

ランディングページのように、1ページ内に「商品案内」「お問い合わせ」など複数の項目が存在する縦長のページにおいて、使用されています。

一般的にグローバルメニュー付きの固定ヘッダーとセットになっている機能となります。

使用した際の効果

画面とシークバーの動きを見ることが出来るため、利用者が「どれだけの項目を経由して遷移先までたどり着いたか」ということが直感的に理解できます。

リンク時、スクロールせずに一瞬で画面が切り替わると、利用者が「ここはどこ？」と不安感を覚えストレスに繋がりますが、スクロール機能を入れる事で緩和できます。

また、単純に「画面が動く」ことで、多少なりともリッチ感を出すことが出来ます。

サンプル

リンク

設定方法

「jQuery」を使用して実装を行いますので、「body」の最後に下記の通りjQueryの読み込み用コードを追記します。
※ダウンロードしたものを使用してもOKです 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

HTMLにて、リンク元の指定は下記とします。

<header>
  <nav>
    <ul>
      <li><a href="#company">会社概要</li>
      <li><a href="#service">サービス紹介</li>
      <li><a href="#contact">お問い合わせ</li>
    </ul>
  </nav>
</header>

移動先の項目はそれぞれ下記のようにidで指定したとします。

<section id="company">~</section>
<section id="service">~</section>
<section id="contact">~</section>

そして、jQueryの読み込みコードの下に書くコードはこちらです。 

$('header nav ul li a').click(function () {
        var secTop = $($(this).attr('href')).offset().top;
        $('html,body').animate({
          scrollTop: secTop
        }, 'slow', 'swing');
        return false;
      });

説明

$('header nav ul li a’).click(function () {~
で、リンク元を押したときに~を発動させるという条件を設定します。

var secTop = $($(this).attr('href’)).offset().top;
で、押したリンク元「a」の遷移先に指定している「section」のページ最上部からの座標を取得し、「secTop」という変数に入れています。

そして
$('html,body’).animate({
scrollTop: secTop
});
という命令で、ページを「secTop」の位置までスクロールさせることができます。

'slow’
については全体的なアニメーションはゆっくりし、
'swing’
については、最初と最後の動作は遅く、それ以外は早くするようにする命令です。
こちらで自然な動きが出来るようになります。
'slow’
の部分は「1000」のように代わりに数字で千分の一秒を指定できます。
アニメーションを早くする
'fast’
も指定できますが、速すぎてもスクロールの動きが目で追えず本末転倒なので、個人的にはslowで指定するのがよいと思います。

最後に
return false;
をつけ、アニメーション後に必要ない「a」のアンカー機能が働かないようにしています。

補足

ヘッダーが上部に固定されているwebサイトの作りの場合、上記の記述だとリンク先の項目上部がヘッダに隠れてしまいますので、その場合は下記のように記述してください。

  $(function() {
      var hdh = $('header').height();
      $('header nav ul li a').click(function() {
        var secTop = $($(this).attr('href')).offset().top;
        $('html,body').animate({
          scrollTop: secTop - hdh
        }, 'slow', 'swing');
        return false;
      });
    });

var hdh = $('header’).height();
でヘッダーの高さを取得し、hdhという変数にいれています。

スクロールさせる記述を
$('html,body’).animate({
scrollTop: secTop – hdh
});
とすることで、スクロール先の座標がヘッダー分だけ下になり、自然な表示にすることができます。
※ヘッダの高さが一定であれば、hdhの部分はその高さの数値に変更して問題ありません。

以上となります。

Web制作,jQuery