ページ内リンクを設定する時、一般的には「アンカーリンク」でリンクされているエリアidの値を取得して実装するかと思いますが、今回はアンカーリンクは使用せずにdata属性で設定する方法についてまとめていきたいと思います。
Contents
data属性とは
data属性（data-*）はカスタムデータ属性とも呼ばれていて、HTML要素に独自の属性を設定することができます。
ページ内スクロールを設定する
横並びのメニューボタンを押すと、それぞれのセクションにスクロールするというものを実装してみます。以下のコードを見てもらえば分かると思いますがaタグは使用していません。替わりにliタグにdata-id属性を設定してあげます。
<ul class="link">
<li data-id="target01">Menu 01</li>
<li data-id="target02">Menu 02</li>
<li data-id="target03">Menu 03</li>
</ul>次に、各セクションの設定です。先ほど設定したdata-idのスクロール先を今度はdata-targetで指定してあげます。
<section data-target="target01" class="section01">
<h2>Section 01</h2>
</section>
<section data-target="target02" class="section02">
<h2>Section 02</h2>
</section>
<section data-target="target03" class="section03">
<h2>Section 03</h2>
</section>jQueryでは、「data-id」の値を取得して、その値と一致いている「data-target」へスムーススクロールするように設定をしていきましょう。
$("[data-id]").on("click", function() {
const id = $(this).data('id'); // data-idのid（target01 ~ target03）を取得
const target = $('[data-target="' + id + '"]');
scrollToAnchor(target);
return false
});
function scrollToAnchor(target) {
let headerHeight;
if ($(target)[0]) {
headerHeight = 0 // 固定メニューなど、ヘッダーの高さ分を引きたい時はここの数値を変更
const position = $(target).offset().top - headerHeight;
$("body, html").stop().animate({
scrollTop: position
}, 600, "swing")
}
}実際の動きは下記で確認できます。
See the Pen Untitled by gri-t (@gri-t) on CodePen.
以上、data属性を使用してページ内スクロールを設定する方法でした。