Exemple d'implémentation JavaScript de l'effet de retour en haut-js tutoriel-php.cn

Exemple d'implémentation JavaScript de l'effet de retour en haut

黄舟

Libérer： 2017-11-16 16:30:04

original

1474 Les gens l'ont consulté

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>

Copier après la connexion

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

Fenêtre d'événement de défilement JS. défilement et position : correction du composant écrit en haut de la page compatible avec IE6

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!