Beispiel einer JavaScript-Implementierung des Return-to-Top-Effekts-js-Tutorial-php.cn

Beispiel einer JavaScript-Implementierung des Return-to-Top-Effekts

黄舟

Freigeben： 2017-11-16 16:30:04

Original

1447 Leute haben es durchsucht

In unserer Entwicklungsarbeit ist JavaScript oft auf Code gestoßen, der JavaScript verwendet, um an den Anfang zurückzukehren Ich werde Ihnen eine detaillierte Einführung in das Beispiel der Verwendung von JavaScript geben, um den Return-to-the-Top-Effekt zu erzielen!

Verwenden Sie natives js, um einen einfachen Back-to-Top-Effekt zu erzielen. Die Anforderungen sind relativ klar: 1. Schaltflächen ein- und ausblenden. 2. Lösen Sie den Onscroll-Clearing--Timer erneut in der Mitte aus (noch nicht implementiert, ich hoffe, Sie können mich aufklären)

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>

Nach dem Login kopieren

Zusammenfassung:
1. Die Rendering-Reihenfolge des Dom-Streams , Hover wird in a geschrieben Es wird früher wirksam, andernfalls wird es überschrieben.

2. Die Verwendung verschiedener Attributmethoden und einfache Kapselung.

3.getElementsByClassName gibt eine Knotenliste zurück, also verwenden Sie die Form eines Arrays.

4. Bei Kompatibilitätsproblemen unter verschiedenen Browsern verzichten Sie auf die Abhängigkeit der Tabulatortaste und verwenden Sie stattdessen zwei Leerzeichen.

5. Installation und Verwendung des Emmet-Plug-Ins.

6. Die von jq bereitgestellte Animation kann den Return-to-Top-Effekt einfacher erzielen. In bestimmten Situationen kann auch die Ankerpunktmethode verwendet werden. Das Problem besteht darin, dass einige Details im Browser-Eingabefeld angezeigt werden.

Verwandte Empfehlungen:

JS-Implementierung Zurück nach oben Spezialeffekte

JS-Scroll-Ereignisfenster.onscroll und Position: Die nach oben geschriebene Komponente wurde korrigiert, die mit IE6 kompatibel ist

javascript – So stellen Sie sicher, dass der Inhalt des Iframes außerhalb des Iframes wieder an die Spitze zurückkehrt

Das obige ist der detaillierte Inhalt vonBeispiel einer JavaScript-Implementierung des Return-to-Top-Effekts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!