ネイティブ JS を使用して、top_javascript スキルに戻る簡単なスライド効果を作成します。

多くの Web ページは、下部に「トップに戻る」ボタンを配置します。特に、ページ下部にナビゲーションのない Web ページでは、これにより、訪問者がナビゲーションを再度見つけたり、広告を確認したりすることができます (なんと素晴らしいアイデアでしょう)。近年JavaScriptが普及し、スライドエフェクトが随所に使われるようになったので、それに倣ってトップに戻る機能もスライドエフェクトにしました。その後、物理的特性に合わせて、減速スライド効果を持たせるように改良されました。

まず原理について説明します。スクロール バーからページの上部までの距離を取得し、次に一定の距離だけ上に移動してから、スクロール バーからページの上部までの距離を取得します。そして、それを一定の距離（前回よりも少し小さく）上に移動します...

<script type="text/javascript"> 
/** 
* 回到页面顶部 
* @param acceleration 加速度 
* @param time 时间间隔 (毫秒) 
**/
function goTop(acceleration, time) { 
acceleration = acceleration || 0.1; 
time = time || 16; 

var x1 = 0; 
var y1 = 0; 
var x2 = 0; 
var y2 = 0; 
var x3 = 0; 
var y3 = 0; 

if (document.documentElement) { 
x1 = document.documentElement.scrollLeft || 0; 
y1 = document.documentElement.scrollTop || 0; 
} 
if (document.body) { 
x2 = document.body.scrollLeft || 0; 
y2 = document.body.scrollTop || 0; 
} 
var x3 = window.scrollX || 0; 
var y3 = window.scrollY || 0; 

// 滚动条到页面顶部的水平距离 
var x = Math.max(x1, Math.max(x2, x3)); 
// 滚动条到页面顶部的垂直距离 
var y = Math.max(y1, Math.max(y2, y3)); 

// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小 
var speed = 1 + acceleration; 
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed)); 

// 如果距离不为零, 继续调用迭代本函数 
if(x > 0 || y > 0) { 
var invokeFunction = "goTop(" + acceleration + ", " + time + ")"; 
window.setTimeout(invokeFunction, time); 
} 
} 
</script>

document.documentElement.scrollTop、document.body.scrollTop、window.scrollY は実際には同じですが、一部のブラウザでのみ機能します。どのブラウザでどれが動作するかについては、自分でデバッグできます。

使い方は？

コードをコピーします コードは次のとおりです:

TOP