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

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>

css :

#btn{position:fixed;display:none;}

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);
  };
};

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