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.