指定した要素の位置へスクロールするボタンを作る方法(jQuery)
どうも！神聖眼鏡です!!
先週キャンプに行ってきたのですが、思ったより寒くて、今週末もキャンプに行くのですが凍えてしまわないか心配しています。。。
さて、今回はよくwebサイトみかける、クリックすると指定した位置まで画面が移動する方法を紹介いたします。
animateメソッド
・jQueryのanimateメソッドを使用します。
・以下はjQueryサイトのメソッドページです。
使い方
<html>
<body>
<input type="button" id="slidebtn" value="ボタン">
<p id="#btn1" style="margin-top: 1999px;">btn1</p>
<p id="#btn2">btn2</p>
<p id="#btn3">btn3</p>
<p id="#btn4">btn4</p>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#slidebtn").click(function () {
const position = $('#btn1').offset().top;
const speed = 600;
$("html,body").animate({scrollTop:position},speed);
});
</script>
</html>上記はサンプルコードです。
11行目のscriptタグではjQueryを読み込んでいます。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>12~21行目のscriptタグ内でjQueryの記述をしており、13行目でボタンの要素を取得しています。
15行目では、移動したい要素、今回は6行目の要素を取得しています。
const position = $('#btn1').offset().top;16行目では、移動するスピードを設定しており、この記述を書かなければデフォルトの400が適応されます。
const speed = 600;17行目で、15行目で取得した位置までアニメーションを伴って移動します。
$("html,body").animate({scrollTop:position},speed);15行目の取得はbtn2など別のIDを指定すれば、その要素まで移動します。
最後に
jqueryを使用すれば意外と簡単に実装できますで試してみてください。
他にもjQueryを使用した記事がありますので、見てみてください。
【HTML/CSS】HTML×CSS×jQueryでハンバーガーメニューを作る
最後まで閲覧いただきありがとうございました。