JS 스크롤 이벤트 window.onscroll 및 위치: 수정됨 IE6과 호환되는 맨 위로 돌아가기 구성 요소 쓰기
- 高洛峰원래의
- 2016-12-29 10:12:031543검색
요즘 인터넷의 back-to-top 구성 요소에는 이해할 수 없는 JavaScript 코드 부분이 많고 호환되지도 않습니다. 이 구성 요소를 시작하려면 JavaScript의 스크롤 이벤트 window.onscroll 및 위치: 고정 필기를 완전히 사용할 수 있습니다. IE6의 호환성 문제는 주로 위치: 수정에서 발생합니다. 해결 방법은 "[CSS] 위치: IE6의 문제 수정 및 스크롤 막대를 사용한 스크롤 효과"에 소개되어 있습니다(링크를 열려면 클릭하세요).
JavaScript에서 스크롤 이벤트 window.onscroll을 사용하여 이 Back to Top 구성 요소를 구현하는 방법에 대해 이야기해 보겠습니다. 구체적인 효과는 다음과 같습니다.
IE6:
IE8:
FireFox:
첫 번째는 HTML+CSS의 레이아웃입니다. 페이지 상단에 id와 name이 모두 page_top인 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed 앵커포인트가 공통이어야 하는 이유 호환성을 위해 ID와 이름을 설정합니다.
그런 다음 오른쪽 하단에 위치가 고정되고 내용이 ↑인 div를 넣습니다. 물론 더 눈부시게 만들고 싶다면 그림으로 만들거나 ♂로 만들 수도 있습니다. 숨겨진.
결국 지면을 차지하고 할 말이 없는 무의미한 e388a4556c0f65e1904146cc1a846bee가 많습니다.
<!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 중국어 웹사이트를 참고하세요!