jQueryでボタンを押すと目的の場所までスライドするリンクナビ(目次)を作る方法/offsetメソッドの使い方

cyclist IT

目的の場所にリンクさせたいだけなら、要素にIDを付けておき、リンク先にID名を指定するだけで事足ります。しかしアニメーションしながらとなると、jQueryで「要素の高さ」を取得する必要が出てきます。

スポンサーリンク

基本的なリンクナビ

まずは、リンクしたい要素にIDを付けます。
ここでは、上の「基本的なリンクナビ」という見出しに「midashi」というIDをつけることにします。
「リンク」をクリックすると見出しのある場所へジャンプします。

<!-- html -->
<h2 id = "midashi">基本的なリンクナビ</h2>
まずは、<a href="#midashi">リンク</a>したい要素にIDを付けます。

これをアニメーションさせたいのですが、そのためには次のような工程を踏みます。

  • リンク先の座標を変数に代入
  • 座標の高さまでアニメーションしながらスクロール

リンク先の座標を変数に代入

jQueryオブジェクトに対して、offsetメソッドを用いることで上、左からの距離を求めることができます。何もつけずに取得するとtop、leftのふたつのプロパティを取得します。

要素の上、左からの距離を取得
$(対象).offset();
※上からの距離だけを求める場合は対象.offset().top;

実際に取得してみましょう。

見出しの高さを取得

//jQuery
$("#top").click(function() {
let position = $("#midashi").offset().top;
alert(position);
});

いい感じの数値が出ました。上のコードで位置を変数positionに代入してますので、座標を指定するときにはこの変数を指定します。

座標の高さまでアニメーションしながらスクロール

あとはanimateメソッドを使って、positionの高さまで移動します。

指定した時間をかけてプロパティを変更
$(対象).animate({‘プロパティ’,’値’},時間);
※時間はミリ秒単位、またはfast/normal/slowで指定

プロパティにはscrollTopを指定し、対象はhtml,bodyとします。
見出しまで移動

//jQuery
$("#topmove").click(function() {
let position = $("#midashi").offset().top;
$('html,body').animate({'scrollTop':position},700);
});

無事実装できました。ただ、このままだと、リンク先を増やすたびに別々のコードを書く必要があります。
なので、リンクボタンからhref属性を取得て、同じコードを使いまわすようにしましょう。

リンクボタンから属性を取得

html側でaボタンにhrefを設定し、jQuery側ではthisとattrを使って、クリックしたボタンのhref属性を取得します。また、IDで遷移していたのをクラスに変更しておきます。

<!-- html -->
<a href = "#midashi" class = "topmove">見出しまで移動</a>
//jQuery
let moveTo = $(this).attr('href');

変数moveToを移動するコードのidがあった場所(#midashi)に設置します。

//jQuery
$("#topmove").click(function() {
let moveTo = $(this).attr('href');
let position = $(moveTo).offset().top;
$('html,body').animate({'scrollTop':position},700);
});

このコードを実装した状態で、topmoveクラス(hrefはそれぞれ違う)を実装したボタンを複数置くと、同じコードでそれぞれちがう場所へスクロールすることが可能です。
見出し1
見出し2
見出し3
見出し4

おまけ:cssで画面の右下に「トップへ戻る」ボタンや画像を固定する方法

JavaScriptの使い方・メソッド・プロパティまとめ
HTML/CSSとセットでフロントエンドエンジニア三種の神器のひとつ、JavaScript系の記事まとめです。

コメント