jQuery Scrollify で <a href=“id”> なリンクをページ内遷移させるサンプルコードをご紹介します。

背景 jQuery Scrollify でページ内遷移したい

jQuery Scrollify で <a href=“id”> なリンクはそのままではアンカーによるページ内遷移が動かないため、本記事ではこの問題の解決方法をご紹介します。

• GitHub: $.scrollify.move("#name");

完成形は以下のような感じです。

? https://codenote-net.github.io/sandbox/scrollify/move.html

jQuery Scrollify サンプルコード

サンプルコードは以下の GitHub Pull Request に公開していますので、ぜひご覧ください。

? jQuery Scrollify で $.scrollify.move(“#name”); でページ内遷移 · Pull Request #8 · codenote-net/sandbox

ざっくり解説しますと、以下のように data-section-name=“home”, “second”, “last” な３ページあるとします。

<div class="section home" data-section-name="home">
  <h1>Home</h1>
  <ul>
    <li><a class="js-scrollify-move" href="#home">#home</a></li>
    <li><a class="js-scrollify-move" href="#second">#second</a></li>
    <li><a class="js-scrollify-move" href="#last">#last</a></li>
  </ul>
</div>
<div class="section second" data-section-name="second">
  <h1>Second</h1>
  <ul>
    <li><a class="js-scrollify-move" href="#home">#home</a></li>
    <li><a class="js-scrollify-move" href="#second">#second</a></li>
    <li><a class="js-scrollify-move" href="#last">#last</a></li>
  </ul>
</div>
<div class="section last" data-section-name="last">
  <h1>Last</h1>
  <ul>
    <li><a class="js-scrollify-move" href="#home">#home</a></li>
    <li><a class="js-scrollify-move" href="#second">#second</a></li>
    <li><a class="js-scrollify-move" href="#last">#last</a></li>
  </ul>
</div>

各ページに遷移させるための a タグの書き方は、以下のように書くと jQuery Scrollify では動かないため、

<a href="#last">#last</a>

js-scrollify-move という class を付与して、

<a class="js-scrollify-move" href="#last">#last</a>

以下のように js-scrollify-move class の付いてる DOM 全てに click event を割り当てて $.scrollify.move(href); を使ってページ遷移させました。

$(function () {
  $.scrollify({
    section: ".section",
  });

  $(".js-scrollify-move").each(function () {
    $(this).click(function () {
      let href = $(this).attr("href");
      $.scrollify.move(href);
    });
  });
});

以上、jQuery Scrollify で縦横無尽にページ内遷移したい、現場からお送りしました。

参考情報

• .click() | jQuery API Documentation