jQuery Scrollify で <a href="id"> なリンクをページ内遷移させるサンプルコード
jQuery Scrollify で <a href=“id”> なリンクをページ内遷移させるサンプルコードをご紹介します。
jQuery Scrollify で <a href=“id”> なリンクはそのままではアンカーによるページ内遷移が動かないため、本記事ではこの問題の解決方法をご紹介します。
完成形は以下のような感じです。
? https://codenote-net.github.io/sandbox/scrollify/move.html
サンプルコードは以下の GitHub Pull Request に公開していますので、ぜひご覧ください。
? jQuery Scrollify で $.scrollify.move(“#name”); でページ内遷移 · Pull Request #8 · codenote-net/sandbox
ざっくり解説しますと、以下のように data-section-name=“home”, “second”, “last” な3ページあるとします。
<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 で縦横無尽にページ内遷移したい、現場からお送りしました。