jQuery でスクロールをアニメーション化する

1. jQuery でスクロールするために animate() メソッドを使用する
2. jQuery でページをスクロールするには、時間制限のある animate() メソッドを使用する

jQuery は、複雑なアイデアを実現するための簡単な構文で広く宣伝されていますが、JavaScript ES6 は、今日では厳しい競争相手です。

div または Web ページを特定の高さまでスクロールすることに焦点を当てると、いくつかの解決策に気付きます。ただし、jQuery の animate() メソッドは、body と html のインスタンスを明示的に受け入れ、設定としてスクロールします。

サンプルセットでは、jQuery の animate() メソッドを使用して基本的な垂直スクロールを実行します。後者の例では、制限された時間枠を持つインスタンスを調べます。

jQuery でスクロールするために animate() メソッドを使用する

この点で、body 要素と html 要素のインスタンスを受け入れます。したがって、規則は、複数のブラウザが制約に関係なく関数を実行できるようにするためのものです。

次に、インスタンスとともに animate() メソッドを開始し、仕様 scrollTop: "0"を設定します。scrollTop を任意の設定値に設定することもできます。

この場合、ページはトップにルーティングされません。むしろ、ページ全体の高さと scrollTop 値の間の距離まで上昇します。

コードスニペット：

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<h4>TOP</h4>
<h4>TOP-20</h4>
<div id="pos" style="height: 600px;background:pink"></div><br>
<button onclick="press()">Go to Top</button>
<script>
function press(){
  $("html, body").animate({scrollTop: "20"});
}
</script>

出力：

jQuery でページをスクロールするには、時間制限のある animate() メソッドを使用する

この例には、前の例と同様の機能が含まれています。ただし、ここでの追加は、setInterval 関数を定義せずにスクロールのタイミングを設定できることです。

scrollTop プロパティとともに適切なタイミングを追加するだけです。これにより、ページスクロールの速度値が緩和または保証されます。

コードスニペット：

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<h4>TOP</h4>
<div id="pos" style="height: 600px;background:powderblue"></div><br>
<button onclick="press()">Go to Top</button>
<script>
function press(){
  $("html, body").animate({scrollTop: "0"}, 3000);
}
</script>

出力：