[jQuery]animateとscrollTopメソッドで画面の指定位置までスクロールする
環境
Google Chrome 104.0.5112.80
Windows 10 Home 64bit
jQuery 3.6.0
Google Chrome 104.0.5112.80
Windows 10 Home 64bit
jQuery 3.6.0
Google Chrome 104.0.5112.80 Windows 10 Home 64bit jQuery 3.6.0
構文
const 指定位置の変数名 = $('#セレクタID名’).offset().top;
const 移動スピード変数名 = 値
$("html,body").animate({scrollTop:指定位置変数名},移動スピード変数名);
animateメソッドを使って画面が取得した位置までアニメーションを伴って移動します。
$("html,body").animate({scrollTop:指定位置変数名},移動スピード変数名);
animateメソッドを使って画面が取得した位置までアニメーションを伴って移動します。
$("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>
<!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>
<!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」までスクロールします。