Dans notre travail de développement, JavaScript est un élément essentiel. Nous rencontrons souvent du code qui utilise JavaScript pour revenir en haut. Je pense que chaque page l'aura aujourd'hui. Je vais vous donner une introduction détaillée de l'exemple d'utilisation de JavaScript pour obtenir l'effet de retour au sommet !
Utilisez du js natif pour obtenir un effet simple de retour en haut. Les exigences sont relativement claires : 1. Afficher et masquer les boutons. 2. Déclenchez à nouveau le timer d'effacement du défilement au milieu (pas encore implémenté, j'espère que vous pourrez m'éclairer)
Code :
<!-- Time:2016.8.4 author:Joel Dom操作 1.document.getElementById 根据ID获取标签元素 2.document.documentElement.scrollTop .ie滚动条数值 3.document.body.scrollTop .chrome 4.document.documentElement.clientHeight 可视区域高度 事件运用 1.window.onload 加载完毕触发事件 2.onclick 点击触发事件 3.window.scroll 滚动条触发事件 定时器 1.setInterval() 2.clearInterval() --> <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .btn:hover{ background: blue; } .btn{ display: none; height: 40px; width: 40px; background: red; position: fixed; left: 1410px; top: 600px; } .image{ width: 1190px; margin:0 auto; } </style> <script type="text/javascript"> window.onload = function(){ var myBtn = document.getElementsByClassName("btn"); var clientHeight = document.documentElement.clientHeight; var timer = null; window.onscroll = function(){ var osTop = document.documentElement.scrollTop || document.body.scrollTop; if(osTop > clientHeight){ myBtn[0].style.display = "block"; } else{ myBtn[0].style.display = "none"; } } myBtn[0].onclick = function(){ clearInterval(timer); timer = setInterval(function(){ var osTop = document.documentElement.scrollTop || document.body.scrollTop; var spd = Math.floor((-osTop) / 1000); document.documentElement.scrollTop = osTop + spd; document.body.scrollTop = osTop + spd; if(osTop == 0){ clearInterval(timer); } },30); } } </script> </head> <body> <a href="javascript:;" class="btn">按钮</a> <p class="image"> <img src="tb_bg.jpg" alt=""> </p> </body> </html>
Résumé :
1. , le survol est écrit dans un Il prendra effet avant, sinon il sera écrasé.
2. L'utilisation de diverses méthodes d'attributs et d'une encapsulation simple.
3.getElementsByClassName renvoie la liste de nœuds, utilisez donc la forme d'un tableau.
4. Pour des problèmes de compatibilité sous différents navigateurs, abandonnez la dépendance de la touche de tabulation et utilisez plutôt deux espaces.
5. Installation et utilisation du plug-in emmet.
6. L'animation fournie par jq permet d'obtenir plus facilement l'effet de retour en haut. La méthode du point d'ancrage peut également être utilisée dans certaines situations. Le problème est que certains détails seront affichés dans le champ de saisie du navigateur.
Recommandations associées :
Implémentation JS Retour en haut Effets spéciaux
javascript - Comment faire revenir le contenu de l'iframe en haut en dehors de l'iframe
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!