js halaman web tatal bar tatal acara contoh kemahiran analisis_javascript

Contoh dalam artikel ini menerangkan penggunaan acara tatal bar skrol halaman web js. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Apabila melakukan kesan js kembali ke atas, anda perlu memantau acara menatal bar skrol pada halaman web Acara ini ialah: window.onscroll. Apabila peristiwa onscroll berlaku, gunakan js untuk mendapatkan nilai scrollTop halaman Apabila dinilai bahawa scrollTop ialah nilai yang ditetapkan, "Return to Face" dipaparkan

.

acara tatal bar skrol web js

<style type="text/css"> 
#top_div{ 
  position:fixed; 
  bottom:80px; 
  right:0; 
  display:none; 
} 
</style> 
<script type="text/javascript"> 
window.onscroll = function(){ 
  var t = document.documentElement.scrollTop || document.body.scrollTop; 
  var top_div = document.getElementById( "top_div" ); 
  if( t >= 300 ) { 
    top_div.style.display = "inline"; 
  } else { 
    top_div.style.display = "none"; 
  } 
} 
</script> 
<a name="top">顶部<a> 
<div id="top_div"><a href="#top">返回顶部</a></div> 
<br /> 
<br /> 
<div> 
这里尽量多些<br />以便页面出现滚动条，限于篇幅本文此处略去 
</div>

Contoh penjelasan sintaks

Tentukan dahulu atribut css top_div dalam teg gaya: position:fixed;display:none; ialah kuncinya

Dalam pernyataan javascript, t mendapat kedudukan tatal ke bawah bar skrol, || adalah untuk pertimbangan keserasian yang lebih baik
Apabila tatal melebihi 300 (piksel), tetapkan ciri paparan css top_div untuk dipaparkan (sebaris), jika tidak sembunyikan (tiada)

Jenis DOCTYPE mesti ditetapkan dan document.documentElement boleh digunakan untuk mendapatkan lebar dan ketinggian tetingkap dalam IE

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