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

1434 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.