目的の場所にリンクさせたいだけなら、要素に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で画面の右下に「トップへ戻る」ボタンや画像を固定する方法
コメント