JS Webページのスクロールバーのスクロールイベントの例分析_JavaScriptスキル

この記事の例では、JS Web ページのスクロール バーのスクロール イベントの使用法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

js が先頭に戻るエフェクトを実行する場合、Web ページのスクロール バーのスクロール イベントを監視する必要があります。このイベントは window.onscroll です。 onscrollイベントが発生すると、jsを使ってページのscrollTop値を取得します。scrollTopが設定値であると判断された場合、「Return to Face」と表示されます

。

js Web スクロールバーのスクロールイベント

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

構文の説明例

まず、style タグで top_div CSS 属性を定義します。position:fixed;display:none; がキーです

JavaScript ステートメントでは、 t はスクロール バーの下方向のスクロール位置を取得します。 || 互換性を考慮したものです
スクロールが 300 (ピクセル) を超える場合、top_div CSS 表示プロパティを表示 (インライン) に設定し、それ以外の場合は非表示 (なし) に設定します

DOCTYPE タイプを設定する必要があり、document.documentElement を使用して IE のウィンドウの幅と高さを取得できます

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。