Utilisez js natif pour créer un simple effet de glissement pour revenir aux compétences top_javascript

De nombreuses pages Web placeront un bouton "retour en haut" en bas, notamment les pages Web sans navigation en bas de la page. Cela peut aider les visiteurs à retrouver la navigation ou à consulter la publicité (quelle belle idée). Comme JavaScript est devenu de plus en plus utilisé ces dernières années, les effets de glissement sont partout, j'ai donc emboîté le pas et fait de la fonction de retour en haut un effet de glissement. Plus tard, afin de mieux s'adapter aux caractéristiques physiques, il a été modifié pour avoir un effet de glissement décélérant.

Parlons d'abord du principe. Nous allons obtenir la distance entre la barre de défilement et le haut de la page, puis la déplacer vers le haut d'une certaine distance ; et déplacez-le d'une certaine distance (un peu plus petite que la dernière fois) ; Et ainsi de suite...

<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 sont en fait identiques, mais ils ne fonctionnent que dans certains navigateurs. Quant à savoir lequel fonctionne dans quels navigateurs, vous pouvez le déboguer vous-même.

Comment utiliser ?

Copier le code Le code est le suivant :

TOP