可変速度を実現する JavaScript コード top_javascript スキルに戻る

近年JavaScriptの普及に伴い、スライドエフェクトが随所に登場したので、それに倣ってトップ機能をスライドエフェクトにしました。その後、物理特性に合わせて減速エフェクトに変更しました。
まず原理について説明します。スクロール バーからページの上部までの距離を取得し、次にスクロール バーからページの上部までの距離を取得します。ページを上に移動し、一定の距離 (前回より少し小さく) ..
JavaScript コード:

コードをコピーします。 🎜> コードは次のとおりです。

/**

* ページの先頭に戻る
* @param 加速加速
* @param time 時間間隔 (ミリ秒)
**/
function goTop(acceleration, time) {
acceleration = 加速度 ||
時間 = 16;
var y1 = 0;
var x3 = 0; 🎜>var y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollTop || 0; 🎜>if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop ||
var x3 = window.scrollX || 0;
var y3 = window.scrollY ||
// スクロール バー
var x = Math.max(x1, Math.max(x2, x3));
// スクロールバーからページの上部までの垂直距離
var y = Math.max (y1, Math.max(y2, y3)); = 現在の距離/速度。距離が小さいほど、速度は 1 より大きい数値になるため、回転距離はどんどん小さくなります。
var Speed = 1加速度
window.scrollTo(Math.floor; (x / 速度), Math.floor(y / 速度));
// 距離がゼロでない場合は、この反復関数の呼び出しを続けます
if(x > 0 || y > 0) {
var invokeFunction = "goTop(" 加速 ", " time ")";
window.setTimeout(invokeFunction, time)
}
}


ドキュメント.documentElement.scrollTop、document.body.scrollTop、window.scrollY は実際には同じですが、一部のブラウザでのみ機能します。
HTML コードをデバッグできます。



コードをコピー


コードは次のとおりです:

TOP