[jQuery]animateとscrollTopメソッドで画面の指定位置までスクロールする
環境
Google Chrome 104.0.5112.80 Windows 10 Home 64bit jQuery 3.6.0
構文
const 指定位置の変数名 = $('#セレクタID名’).offset().top;
const 移動スピード変数名 = 値
$("html,body").animate({scrollTop:指定位置変数名},移動スピード変数名);
animateメソッドを使って画面が取得した位置までアニメーションを伴って移動します。
使用例
<!DOCTYPE html>
<html>
<body>
<p>test data AA</p>
<p>test data BB</p>
<p id="cft">東京大阪</p>
<input type="button" id="btnshow" value="表示" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#btnshow").click(function () {
/*要素の位置を取得*/
const position = $('#cft').offset().top;
/*移動するスピードを設定*/
const speed = 300;
/*アニメーションを設定*/
$("html,body").animate({scrollTop:position},speed);
});
</script>
</body>
</html>
結果
「表示」ボタンを押すと画面がdiv要素「cft」までスクロールします。