Implémentation du bouton de retour en haut basé sur les compétences Javascript_javascript

Lorsqu'une page Web a trop de contenu, les données seront affichées sur des écrans partagés. S'il y a plusieurs écrans, les données consultées par l'utilisateur ont atteint le bas de la page et il faudra un certain temps pour revenir à la page. top. Cela peut nuire à l'expérience utilisateur. Un peu pire. Par conséquent, les pages Web contenant beaucoup de données de page utiliseront désormais un bouton "Retour en haut" pour accéder rapidement au haut de la page Web.
Implémentons maintenant une telle fonction.

Nous n'écrirons aucune donnée sur cette page, ajoutez simplement une balise a en guise de bouton pour revenir en haut, et donnez-lui un nom de classe : top.

<a href="#" class="top">顶部</a>

Puis définissez sa feuille de style :

body {
  height: 3000px;
}

.top {
  position: absolute;
  top: 120px;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-decoration: none;
  text-align: center;
  background-color: #666666;
  color: #ffffff;
  right: 10px;
  transition: all 0.3s;
   visibility: hidden;
}
.top:hover {
  background-color: #ff3300;
}

Ici, le corps est réglé à une hauteur de 3000, principalement pour donner à la page un effet de défilement. Les boutons sont généralement placés un peu plus bas sur le côté droit de la page Web.

Nous devons également analyser que lorsque la page Web visitée par l'utilisateur est en haut de la page, ce bouton ne sera certainement pas affiché. Nous utilisons donc la visibilité ici pour contrôler si le bouton est affiché ou non.

L'interface est très simple, traitons-en d'abord. Analysons l'implémentation de JS.

Tout d'abord, ce bouton a un effet sur l'ensemble de la page Web, donc la surveillance des événements de défilement doit être définie sur toute la fenêtre. Par conséquent, nous définissons un événement de défilement pour la fenêtre
.

window.onscroll = function (e) {...}

Dans cet événement, nous contrôlons la position haut et bas du bouton de retour en haut, et s'il faut l'afficher. Tout d'abord, complétons le contrôle de la position haut et bas.

Pour contrôler les positions haut et bas, nous devons calculer la hauteur du scrollTop et la hauteur de l'affichage sur écran unique de la page Web. Lorsque l'utilisateur entre dans la page, nous plaçons ce bouton en position médiane droite de. la page par défaut. Le calcul à ce moment est :

var n_half_height = window.screen.height / 2;

Attribuez cette valeur à l'attribut supérieur du bouton.

Ensuite, si l'utilisateur fait défiler, la position restera définitivement inchangée, et le calcul à ce moment devrait être

var n_stop = e.target.scrollingElement.scrollTop; //获取scrollTop的高度
var n_top = n_stop + n_half_height;//得到位置

Il s'agit de l'objet e qui est l'événement paramètre dans onsroll. Ici, j'utilise Google Chrome. D'autres navigateurs n'ont pas été testés. Si la compatibilité est requise, vous pouvez vous en occuper.
Chaque parchemin doit calculer sa hauteur, celle-ci doit donc être placée dans l'événement onscroll. Ensuite, attribuez cette valeur à l'attribut supérieur du bouton

.

Bien sûr, n'oubliez pas une chose, c'est que lorsque scrollTop est à 0, le bouton n'a pas besoin d'être affiché. Lorsqu'il est supérieur à 0, le bouton doit être affiché. Comme mentionné précédemment, nous utilisons le. attribut de visibilité pour le contrôler. De cette façon, le code est complet
. Code Javascript complet

var ele_body = document.body;
var ele_top = document.getElementsByClassName("top")[0];
var n_half_height = window.screen.height / 2;
ele_top.style.top = n_half_height + "px";
window.onscroll = function (e) {
 var n_stop = e.target.scrollingElement.scrollTop;
 if (n_stop === 0 ) {
  ele_top.style.visibility = "hidden";
 }else {
  ele_top.style.visibility = "visible";
 }
 var n_top = n_stop + n_half_height ;
 ele_top.style.top = n_top + "px";
}

Affichage de l'effet final :

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.