JS 스크롤 이벤트 window.onscroll 및 위치: 수정됨 IE6과 호환되는 맨 위로 돌아가기 구성 요소 쓰기-JS 튜토리얼-php.cn

JS 스크롤 이벤트 window.onscroll 및 위치: 수정됨 IE6과 호환되는 맨 위로 돌아가기 구성 요소 쓰기

高洛峰

풀어 주다： 2016-12-29 10:12:03

원래의

1505명이 탐색했습니다.

요즘 인터넷의 back-to-top 구성 요소에는 이해할 수 없는 JavaScript 코드 부분이 많고 호환되지도 않습니다. 이 구성 요소를 시작하려면 JavaScript의 스크롤 이벤트 window.onscroll 및 위치: 고정 필기를 완전히 사용할 수 있습니다. IE6의 호환성 문제는 주로 위치: 수정에서 발생합니다. 해결 방법은 "[CSS] 위치: IE6의 문제 수정 및 스크롤 막대를 사용한 스크롤 효과"에 소개되어 있습니다(링크를 열려면 클릭하세요).

JavaScript에서 스크롤 이벤트 window.onscroll을 사용하여 이 Back to Top 구성 요소를 구현하는 방법에 대해 이야기해 보겠습니다. 구체적인 효과는 다음과 같습니다.

IE6:

JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件

IE8:

JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件

FireFox:

JS 滚动事件window.onscroll与position：fixed写兼容IE6的回到顶部组件

첫 번째는 HTML+CSS의 레이아웃입니다. 페이지 상단에 id와 name이 모두 page_top인 앵커포인트가 공통이어야 하는 이유 호환성을 위해 ID와 이름을 설정합니다.

그런 다음 오른쪽 하단에 위치가 고정되고 내용이 ↑인 div를 넣습니다. 물론 더 눈부시게 만들고 싶다면 그림으로 만들거나 ♂로 만들 수도 있습니다. 숨겨진.

결국 지면을 차지하고 할 말이 없는 무의미한

가 많습니다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>回到顶部</title>
 <style type="text/css">
 #top_div{
  position:fixed;
  bottom:0px;
  right:0px;
  display:none;
  /*兼容IE6的position:fixed*/
  _position: absolute;         
  _top: expression(eval( 
  document.documentElement.scrollTop + document.documentElement.clientHeight-this.offsetHeight- 
  (parseInt(this.currentStyle.marginTop,10)||0)- 
  (parseInt(this.currentStyle.marginBottom,10)||0))); 
  _margin-bottom:0px;
  _margin_right:0px;
 }
 </style>
 </head>
 <body>
 <a id="page_top" name="page_top"></a><!--回到顶部的锚点-->
 <div id="top_div"><a href="#page_top" style="text-decoration:none">↑</a></div>
 <p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p>
 <p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p>
 <p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p>
 <p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p>
 <p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p><p>占位置的内容</p>
 </body>
</html>

로그인 후 복사

뒤의 스크립트 부분에서는 모든 것이 매우 명확합니다.

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

로그인 후 복사

사용자가 스크롤 막대를 스크롤할 때 트리거되는 스크롤 이벤트 window.onscroll이 하나만 있습니다. var t = document.documentElement.scrollTop || document.body.scrollTop; 다음 t>=300은 여기에서 스크롤 막대가 300px 아래로 스크롤된 후 top_div가 표시되도록 하는 것입니다. 이는 다른 스타일에 영향을 미칩니다.

읽어주셔서 감사합니다. 도움이 되기를 바랍니다. 이 사이트를 지원해 주셔서 감사합니다!

더 많은 JS 스크롤 이벤트 window.onscroll 및 position:fixed를 보려면 IE6과 호환되는 back-to-top 컴포넌트를 작성하세요. 관련 기사는 PHP 중국어 웹사이트를 참고하세요!