Rumah > Artikel > hujung hadapan web > js klik mudah kembali ke atas kesan pelaksanaan kaedah_kemahiran javascript

js klik mudah kembali ke atas kesan pelaksanaan kaedah_kemahiran javascript

WBOYasal: 2016-05-16 16:05:041392semak imbas

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>

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

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：js kaedah mudah untuk merealisasikan kemahiran movement_javascript klik kiri dan kananArtikel seterusnya：js kaedah mudah untuk merealisasikan kemahiran movement_javascript klik kiri dan kanan

Artikel berkaitan

Lihat lagi