今回はページ内のリンクをクリックすると、ジャンプまたは、スクロールで移動させる方法を解説します。
簡単ですのでサクッと行きますね～(*^^)v
それではいってみましょう！
作成手順
作成手順
➀クリックしたらの処理（クリックイベント）
➁目的の要素の座標TOP位置を取得
➂➁の座標TOP位置をスクロールTOP位置に設定
➃animateでスクロール速度を付ける（スクロールさせる場合のみ）
大まかにこんな感じでジャンプやスクロール移動ができるようになります(*^^)v
ジャンプ移動
下記のリンクをクリックすると、１つ下のh2タグ（スクロールして移動）にジャンプします。
1 2 3 4 5 6 | $(function() { $('a[href="#13262_1"]').click(function() { //① let ostTop = $('h2:contains("スクロールして移動")').offset().top; //② $(window).scrollTop(ostTop); //③ }); }); |
【解説】
➀クリックイベントでリンクのhref属性が#13262_1（属性値を検索）のリンクがクリックされたら処理を実行します。
➁containsメソッドでh2タグの文字に”スクロールして移動”が含まれていたらを検索して、offsetメソッドで座標TOP位置を数値で取得します。
➂要素をwindow指定してスクロールTOPプロパティで、offsetメソットで取得した座標TOP位置を設定すると、指定したh2タグにジャンプします。
スクロールして移動
下記リンクをクリックすると、2つ上のh2タグ（作成手順）にスクロールして移動します。
1 2 3 4 5 6 | $(function() { $('a[href="#13262_2"]').click(function() { let ostTop = $('h2:contains("作成手順")').offset().top; $('html,body').animate({scrollTop: ostTop}, 500); }); }); |
【解説】
こちらも簡単です。
下記の1文を追加するだけで完成です＼(^^)／
1 | $('html,body').animate({scrollTop: ostTop}, 500); |
基本的に先程の移動と一緒で、animateメソッドを使用して引数にスクロールさせたい要素のオフセットTOPをスクロールTOPに指定して、移動速度をミリ秒指定するだけで、指定したh2タグにスクロールして移動します。
まとめ
ページに目次を付けて指定箇所にジャンプ移動させたい場合や、右下によくあるTOPボタンを作成する際などに有効活用できそうです。
以上です。
