I’ll introduce sample code for enabling internal page navigation with <a href=“id”> links using jQuery Scrollify.

Background: Want to navigate within pages using jQuery Scrollify

With jQuery Scrollify, <a href=“id”> links don’t work for anchor-based internal page navigation by default. This article introduces a solution to this problem.

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

The final result looks like this:

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

jQuery Scrollify Sample Code

The sample code is available in the following GitHub Pull Request, so please check it out:

? Internal page navigation with $.scrollify.move(“#name”); using jQuery Scrollify · Pull Request #8 · codenote-net/sandbox

To explain briefly, let’s say you have 3 pages with data-section-name=“home”, “second”, “last” as follows:

<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>

Writing anchor tags for navigating to each page like this won’t work with jQuery Scrollify:

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

So I added a js-scrollify-move class:

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

Then I assigned click events to all DOM elements with the js-scrollify-move class and used $.scrollify.move(href); for page navigation as follows:

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

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

That’s all from the Gemba, where I wanted to navigate freely within pages using jQuery Scrollify.

Reference Information

• .click() | jQuery API Documentation