suchen

Heim >Web-Frontend >js-Tutorial >js einfach klicken Zurück zum Anfang Effekt Implementierungsmethode_Javascript-Fähigkeiten

js einfach klicken Zurück zum Anfang Effekt Implementierungsmethode_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 16:05:041472Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie der js-einfache Click-to-Return-to-Top-Effekt implementiert wird. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Wenn die Seite besonders lang ist und der Benutzer zum Anfang der Seite zurückkehren möchte, muss er mehrmals scrollen, um zum Anfang zurückzukehren. Wenn sich in der unteren rechten Ecke der Seite eine Schaltfläche „Zurück zum Anfang“ befindet Auf der Seite kann der Benutzer darauf klicken, um zum Anfang zurückzukehren. Für den Benutzer ist es ein besseres Erlebnis, nach oben zu gehen.

Implementierungsprinzip: Wenn die Seite geladen wird, positionieren Sie das Element in der unteren rechten Ecke der Seite. Wenn die Seite scrollt, befindet sich das Element immer in der unteren rechten Ecke. Die Seite kehrt zum Anfang zurück.

Punkt 1: document.documentElement.clientWidth || Ermitteln Sie die Breite des visuellen Bereichs. Die Rückseite ist mit Chrome kompatibel und die Vorderseite ist mit anderen Browsern kompatibel.

Punkt 2: oTop.style.left = screenw - oTop.offsetWidth "px"; Wenn die Seite geladen wird, positionieren Sie das Element ganz rechts auf der Seite und subtrahieren Sie das Element von der Breite von der visuelle Bereich Die Breite seiner selbst.

Punkt drei: oTop.style.top = screenh - oTop.offsetHeight scrolltop „px“; Beim Scrollen der Seite ist die Y-Koordinatenposition des Elements gleich der Höhe des visuellen Bereichs minus die Höhe des Elements selbst plus die Scroll-Distanz.

Punkt 4: document.documentElement.scrollTop = document.body.scrollTop =0; Wenn auf das Element geklickt wird, sei der Bildlaufabstand der Seite 0. Schreiben Sie aus Kompatibilitätsgründen zwei.

Obiger Code: 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
body{margin:0; padding:0}
#to_top{width:30px; height:40px; padding:20px; font:14px/20px arial; text-align:center; background:#06c; position:absolute; cursor:pointer; color:#fff}
</style>
<script>
window.onload = function(){
 var oTop = document.getElementById("to_top");
 var screenw = document.documentElement.clientWidth || document.body.clientWidth;
 var screenh = document.documentElement.clientHeight || document.body.clientHeight;
 oTop.style.left = screenw - oTop.offsetWidth +"px";
 oTop.style.top = screenh - oTop.offsetHeight + "px";
 window.onscroll = function(){
  var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
  oTop.style.top = screenh - oTop.offsetHeight + scrolltop +"px";
 }
 oTop.onclick = function(){
  document.documentElement.scrollTop = document.body.scrollTop =0;
 }
} 
</script>
</head>
<body style="height:1000px;">
<h1>返回顶部</h1>
<div id="to_top">返回顶部</div>
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js einfache Methode zum Erlernen von Links- und Rechtsklick-Bewegung_Javascript-FähigkeitenNächster Artikel：js einfache Methode zum Erlernen von Links- und Rechtsklick-Bewegung_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen