De nombreuses pages Web placeront un bouton "Back to Top" ci-dessous, en particulier les pages Web qui n'ont pas de navigation en bas de la page, ce qui peut aider les visiteurs à retrouver la navigation ou à revoir l'annonce (c'est si beau). Alors que JavaScript devient de plus en plus largement utilisé ces dernières années, l'effet coulissant est partout, j'ai donc suivi la tendance et fait le retour à la fonction supérieure pour créer un effet glissant. Plus tard, afin de mieux adapter les caractéristiques physiques, l'effet coulissant du ralentissement a été transformé.
Parlons d'abord du principe. Nous obtiendrons la distance entre la barre de défilement vers le haut de la page, puis la déplacerons sur une certaine distance; Ensuite, faites la distance de la barre de défilement en haut de la page et déplacez-la par une certaine distance (légèrement plus petite que la dernière fois); et ainsi de suite...
<Script Type = "Text / Javascript"> / ** * Retour en haut de la page * @param Accélération Accélération * @param Time Time Intervals (ms) ** / fonction gotop (Acceleration, Time) {Acceleration = Acceleration || 0,1; Time = heure || 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; // Distance horizontale de la barre de défilement en haut de la page var x = math.max (x1, math.max (x2, x3)); // Distance verticale de la barre de défilement en haut de la page var y = math.max (y1, math.max (y2, y3)); // Distance de défilement = distance de courant / vitesse, car la distance est plus petite et la vitesse est supérieure à 1, la distance de défilement deviendra de plus en plus petite et plus petite vitesse VAR = 1 + accélération; window.scrollto (math.floor (x / vitesse), math.floor (y / speed)); // Si la distance n'est pas nulle, continuez à appeler la fonction d'itération if (x> 0 || y> 0) {var invokeFunction = "gotop (" + accélération + "," + time + ")"; window.setTimeout (invokeFunction, time); }} </ script>document.documentElement.scrolltop, document.body.scrolltop, window.scrolly sont en fait les mêmes, mais ils ne fonctionnent que dans certains navigateurs. Quant à quels navigateurs fonctionnent, vous pouvez le déboguer vous-même.
Comment l'utiliser?
La copie de code est la suivante:
<a href = "#" onclick = "gotop (); return false;"> top </a>