js simple clic retour au début de la mise en œuvre des effets compétences method

js simple clic retour au début de la mise en œuvre des effets compétences method_javascript

WBOY

Libérer： 2016-05-16 16:05:04

original

1392 Les gens l'ont consulté

L'exemple de cet article décrit comment implémenter l'effet simple clic pour revenir en haut de la page js. Partagez-le avec tout le monde pour votre référence. L'analyse spécifique est la suivante :

Lorsque la page est particulièrement longue et que l'utilisateur souhaite revenir en haut de la page, il doit faire défiler plusieurs fois pour revenir en haut s'il y a un bouton "Retour en haut" dans le coin inférieur droit de la page. page, l'utilisateur peut cliquer dessus pour revenir en haut. Aller en haut est une meilleure expérience pour les utilisateurs.

Principe de mise en œuvre : Lors du chargement de la page, positionnez l'élément dans le coin inférieur droit de la page. Lorsque la page défile, l'élément sera toujours dans le coin inférieur droit. la page revient en haut.

Point 1 : document.documentElement.clientWidth || document.body.clientWidth; Obtenez la largeur de la zone visuelle. Le verso est compatible avec Chrome et le recto est compatible avec d’autres navigateurs.

Point 2 : oTop.style.left = screenw - oTop.offsetWidth "px" Lorsque la page se charge, positionnez l'élément à l'extrême droite de la page et soustrayez l'élément de la largeur de la zone visuelle La largeur d'elle-même.

Point trois : oTop.style.top = screenh - oTop.offsetHeight scrolltop "px" Lorsque la page défile, la position de la coordonnée Y de l'élément est égale à la hauteur de la zone visuelle moins ; la hauteur de l'élément lui-même, plus la distance de défilement.

Point 4 : document.documentElement.scrollTop = document.body.scrollTop =0; Lorsque l'on clique sur l'élément, laissez la distance de défilement de la page être de 0. Écrivez-en deux pour plus de compatibilité.

Code ci-dessus :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0}
#to_top{width:30px; height:40px; padding:20px; font:14px/20px arial; text-align:center; background:#06c; position:absolute; cursor:pointer; color:#fff}
</style>
<script>
window.onload = function(){
 var oTop = document.getElementById("to_top");
 var screenw = document.documentElement.clientWidth || document.body.clientWidth;
 var screenh = document.documentElement.clientHeight || document.body.clientHeight;
 oTop.style.left = screenw - oTop.offsetWidth +"px";
 oTop.style.top = screenh - oTop.offsetHeight + "px";
 window.onscroll = function(){
  var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
  oTop.style.top = screenh - oTop.offsetHeight + scrolltop +"px";
 }
 oTop.onclick = function(){
  document.documentElement.scrollTop = document.body.scrollTop =0;
 }
} 
</script>
</head>
<body style="height:1000px;">
<h1>返回顶部</h1>
<div id="to_top">返回顶部</div>
</body>
</html>

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

js simple clic retour au début de la mise en œuvre des effets compétences method_javascript