ホームページ >ウェブフロントエンド >jsチュートリアル >JS スクロール イベント window.onscroll とposition: IE6 と互換性のある「先頭に戻る」コンポーネントの書き込みを修正しました
JS スクロール イベント window.onscroll とposition: IE6 と互換性のある「先頭に戻る」コンポーネントの書き込みを修正しました
- 高洛峰オリジナル
- 2016-12-29 10:12:031642ブラウズ
現在、インターネット上の back-to-top コンポーネントを理解していれば、理解できない JavaScript コードの大部分があり、互換性もありません。このコンポーネントを開始するには、JavaScript のスクロール イベント window.onscroll と Position:fixed handwriting を完全に使用できます。 IE6の互換性問題は主にposition:fixedで発生します。解決方法は「【CSS】IE6のPosition:fixed問題とスクロールバーによるスクロールの影響」で紹介しています（クリックするとリンクが開きます）。
JavaScript でスクロール イベント window.onscroll を使用して、この「トップに戻る」コンポーネントを実装する方法について話しましょう。具体的な効果は以下の通りです:
IE6:
IE8:
FireFox:
1つ目はHTML+CSSのレイアウトで、IDと名前がともにpage_topであるa<はページの上部に配置される ;a>5db79b134e9f6b82c0b36e0489ee08edアンカー ポイントとして、ID と名前を一緒に設定する必要があるのは、互換性のためです。
そして、右下隅にposition:fixedとcontent ↑を配置します。もちろん、もっと眩しくしたい場合は、それを写真にすることもできます。または、最初はこの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 が 1 つだけあり、ユーザーがスクロール バーをスクロールするとトリガーされます。 var t = document.documentElement.scrollTop || .scrollTop; は、ほとんどのブラウザと互換性があります。以下の t>=300 は、スクロール バーが 300 ピクセル下にスクロールされた後に表示されるようにするためのもので、他のスタイルに影響を与えることを避けるために Inline が使用されます。
読んでいただきありがとうございます、皆さんのお役に立てれば幸いです、このサイトをサポートしていただきありがとうございます!
JS スクロール イベントの詳細については、window.onscroll とposition:fixed、IE6 と互換性のある back-to-top コンポーネントを作成してください。関連記事については、PHP 中国語 Web サイトに注目してください。