「jQuery」animateメソッドでスピードを指定して画面のトップまでにスクロールする
環境
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
構文
.animate( properties [, duration ] [, easing ] [, complete ] )
scrollTopの引数に数値をいれるとその位置まで移動します。
animateは、移動にスピードや動きを追加できます。
書式
$(“html,body").animate({scrollTop:位置},スピート);
移動スピードは、数を大きくすると遅くなり、小さくすると早くなります。移動するスピードは400がデフォルト値です。animateメソッドを使って設定した位置までアニメーションを伴って移動します。
使用例
<!DOCTYPE html>
<html>
<body>
<p>test data 123456</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 () {
/*位置を0に設定*/
let position = 0;
/*移動スピードを指定*/
let speed = 500;
/*アニメーションを指定*/
$("html,body").animate({scrollTop:position},speed);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>test data 123456</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 () {
/*位置を0に設定*/
let position = 0;
/*移動スピードを指定*/
let speed = 500;
/*アニメーションを指定*/
$("html,body").animate({scrollTop:position},speed);
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>test data 123456</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 () {
/*位置を0に設定*/
let position = 0;
/*移動スピードを指定*/
let speed = 500;
/*アニメーションを指定*/
$("html,body").animate({scrollTop:position},speed);
});
</script>
</body>
</html>
結果
「表示」ボタンを押すと画面トップまで少し遅めでスクロールします。