Maison > interface Web > js tutoriel > le corps du texte

Javascript retour au haut de la page mise en œuvre du bouton méthode_javascript compétences

WBOY
Libérer: 2016-05-16 15:20:55
original
1549 Les gens l'ont consulté

L'exemple de cet article présente la méthode d'implémentation du bouton de retour javascript en haut et le partage avec tout le monde pour votre référence. Le contenu spécifique est le suivant

.

html :

<a href="javascript:;" id="btn" title="回到顶部"></a>
Copier après la connexion

css :

#btn{position:fixed;display:none;}
Copier après la connexion

script :

Obtenez la hauteur de la barre de défilement :document.documentElement.scrollTop || document.body.scrollTop

Obtenir la hauteur de la zone visuelle :document.documentElement.clientHeight
code js

window.onload = function(){
  var obtn = document.getElementById('btn');
  //获取页面可视区的高度
  var clientHeight = document.documentElement.clientHeight;
  var timer = null;
  var isTop = true;
  window.onscroll = function(){
    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (osTop >= clientHeight){
    //显示按钮
      obtn.style.display = 'block';
    }else {
    //隐藏按钮
      obtn.style.display = 'none';
    }
    if (!isTop){
      clearInterval(timer);
    }
    isTop = false;
  };
  obtn.onclick = function(){    
    //设置定时器
    timer = setInterval(function(){
      //获取滚动条距离顶部的高度
      var osTop = document.documentElement.scrollTop || document.body.scrollTop;
      var ispeed = Math.floor(-osTop / 6);
      document.documentElement.scrollTop = document.body.scrollTop = osTop +ispeed;
      
      isTop = true;
      if (osTop === 0){
        clearInterval(timer);
      }
    },30);
  };
};
Copier après la connexion

J'espère que cet article sera utile à tous ceux qui apprennent la programmation JavaScript.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal