A Little Each Day

note to self

JavaScriptでページ内の遷移を実装する

こんにちは。本日はページ内移動をJSで実装する方法です。

縦長のレイアウトなwebサイトの場合、ナビリンクをクリックするとその場所まで自動でスクロールしながら移動できる機能をつけたいと思うことがあるかと思います。

JS自体も複雑なことを書くわけではなくシンプルなので、実装方法を一緒に見ていきましょう。

ナビバー

まずはナビバー部分をつくりましょう。

ナビバーのリンク部分に移動したい場所のid名を指定します。

(移動したい場所のid名はあとで指定します。)

<div id="nav" class="global-nav">
    <div class="container">
      <div class="nav-left">
        <a class="logo" href="#top">タイトル</a>
      </div>
      <div class="nav-right">
        <ul class="nav-list">
          <li><a href="#section1">section1</a></li>
          <li><a href="#section2">section2</a></li>
          <li><a href="#section3">section3</a></li>
        </ul>
      </div>
    </div>
  </div>


ナビバーリンクは以上です。


移動先

次に移動先となる部分をhtmlで指定していきましょう。

今回はわかりやすくシンプルに3セクションのレイアウトにしました。

<div id="section1">
  セクション1
</div>
<div id="section2">
  セクション2
</div>
<div id="section3">
  セクション3
</div>


大切なのは最初に指定したリンクのURL名に合わせることです。

ナビバーリンクのid名とhtmlのid名が一致して、その場所に飛んでくれるようになります。


JS

それでは、いよいよページ内移動を実装していきましょう。

  $('#nav a').on('click', function() {
    var target = $($(this).attr('href'));
    $('html, body').animate({
      scrollTop: target.offset().top,
    }, 500);
  });


たったこれだけでページ内移動を実装できてしまいます。


上記のコードを簡単に説明すると

・#navのリンク(aタグ)をクリックしたら
・そのリンク先(同じid名の場所)に移動する

となっています。


またスクロールのスピード(今回は500)も指定できるので、各自自分で調整してください。


これでページ内移動を実装できました。



本日は以上です。