js klik mudah kembali ke atas kesan pelaksanaan kaedah_kemahiran javascript-tutorial js-php.cn

js klik mudah kembali ke atas kesan pelaksanaan kaedah_kemahiran javascript

WBOY

Lepaskan： 2016-05-16 16:05:04

asal

1456 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara melaksanakan kesan klik-untuk-kembali-ke-atas mudah js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Apabila halaman itu sangat panjang dan pengguna ingin kembali ke bahagian atas halaman, dia mesti menatal beberapa kali untuk kembali ke bahagian atas Jika terdapat butang "Kembali ke Atas" di sudut kanan bawah halaman, pengguna boleh mengkliknya untuk kembali ke bahagian atas adalah pengalaman yang lebih baik untuk pengguna.

Prinsip pelaksanaan: Apabila halaman dimuatkan, letakkan elemen di sudut kanan bawah halaman Apabila halaman menatal, elemen itu akan sentiasa berada di sudut kanan bawah apabila pengguna mengklik, halaman kembali ke atas.

Mata 1: document.documentElement.clientWidth || document.body.clientWidth; Bahagian belakang serasi dengan krom, dan bahagian depan serasi dengan penyemak imbas lain.

Mata 2: oTop.style.left = screenw - oTop.offsetWidth "px"; kawasan visual Kelebaran dirinya.

Titik tiga: oTop.style.top = screenh - oTop.offsetHeight atas tatal "px"; ketinggian elemen itu sendiri , serta jarak tatal.

Perkara 4: document.documentElement.scrollTop = document.body.scrollTop =0;

Kod di atas:

<!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>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.