jQueryのanimateメソッドで、画面をスクロールさせて移動するサンプルです。
目次
| 説明 | animateメソッド |
| サンプル | 画面トップまでスクロールする |
| 画面の指定位置までスクロールする |
animateメソッド
- jQueryのanimateメソッドです。
- アニメーションの動きを追加できます。
- 以下はjQueryサイトのanimateメソッドのページです。
http://api.jquery.com/animate/
テストポイント
画面トップまでスクロールする
ボタンを押すと画面トップまでスクロールします。
コード
上記サンプルのコードです。
<html><body>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p>a</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<input type="button" id="button1" value="ボタン" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function () {
$("#button1").click(function () {
var position = 0;
var speed = 600;
$("html,body").animate({scrollTop:position},speed);
});
});
</script>
</html>12行目は、位置を0に設定しています。
13行目は、移動するスピードを設定しています。400がデフォルト値です。
移動スピードは、数を大きくすると遅くなり、小さくすると早くなります。
14行目は、12行目で設定した位置までアニメーションを伴って移動します。
画面の指定位置までスクロールする
ボタンを押すとこの画面の「テストポイント」という記述箇所までスクロールします。
コード
上記サンプルのコードです。
<html><body>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<p id="testpoint1">テストポイント</p>
<p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p><p>a</p>
<input type="button" id="button2" value="ボタン" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function () {
$("#button2").click(function () {
const position = $('#testpoint1').offset().top;
const speed = 200;
$("html,body").animate({scrollTop:position},speed);
});
});
</script>
</html>上記サンプルのコードです。
12行目は、3行目の要素の位置を取得しています。
13行目は、移動するスピードを設定しています。400がデフォルト値です。
移動スピードは、数を大きくすると遅くなり、小さくすると早くなります。
14行目は、12行目で取得した位置までアニメーションを伴って移動します。
関連の記事