Heutzutage enthält die Back-to-Top-Komponente im Internet einen großen Teil des JavaScript-Codes, der unverständlich und auch inkompatibel ist. Um diese Komponente zu starten, können Sie das Scroll-Ereignis window.onscroll und position: Fixed Handwriting von JavaScript vollständig verwenden. Das Kompatibilitätsproblem von IE6 tritt hauptsächlich in position: behoben auf. Wie man es löst, wurde in „[CSS] Position: behobenes Problem in IE6 und die Auswirkung des Scrollens mit der Bildlaufleiste“ vorgestellt (klicken Sie, um den Link zu öffnen).
Lassen Sie uns darüber sprechen, wie Sie das Scroll-Ereignis window.onscroll in JavaScript verwenden, um diese Back-to-Top-Komponente zu implementieren. Die spezifischen Effekte sind wie folgt:
IE6:
IE8:
FireFox:
Das erste ist das Layout von HTML+CSS. Platzieren Sie oben auf der Seite ein , dessen ID und Name beide page_top sind Der Grund, warum er gemeinsam sein muss. Legen Sie die ID und den Namen fest, um die Kompatibilität zu gewährleisten.
Dann fügen Sie ein Div mit der Position „fixed“ und dem Inhalt ↑ in die untere rechte Ecke ein. Wenn Sie es noch schillernder machen möchten, können Sie es natürlich auch zu einem Bild machen ♂ mit Versteckt.
Am Ende gibt es eine Menge bedeutungsloses
, das Platz einnimmt und nichts zu sagen hat. Im Skriptteil nach
<!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>ist alles ganz klar:
<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>Es gibt nur ein Scroll-Ereignis window.onscroll, das ausgelöst wird, wenn der Benutzer die Bildlaufleiste scrollt, var t = document.documentElement.scrollTop || ist mit den meisten Browsern kompatibel. Das folgende t>=300 dient dazu, die Bildlaufleiste um 300 Pixel nach unten zu scrollen. Dies wirkt sich auf andere Stile aus.
Vielen Dank fürs Lesen, ich hoffe, es kann Ihnen helfen, vielen Dank für Ihre Unterstützung dieser Website!
Für weitere JS-Scroll-Ereignisse „window.onscroll“ und „position:fixed“ schreiben Sie eine Back-to-Top-Komponente, die mit IE6 kompatibel ist. Weitere Artikel finden Sie auf der chinesischen PHP-Website.
