js einfach klicken Zurück zum Anfang Effekt Implementierungsmethode_Javascript-Fähigkeiten-js-Tutorial-php.cn

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

WBOY

Freigeben： 2016-05-16 16:05:04

Original

1471 Leute haben es durchsucht

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>

Nach dem Login kopieren

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