JS scrolling Event Window.onscroll and position:fixed write compatible IE6 to top component _javascript tips

Now on the internet to the top of the components, do not understand a large section of people do not understand the JavaScript code, but also a variety of incompatible. Starting with this component, you can fully use JavaScript scrolling events window.onscroll with position:fixed handwriting. IE6 compatibility problems mainly appear on position:fixed, how to solve the position:fixed problem in the "CSS" IE6 and the effect of scrolling with the scroll bar (click to open the link) introduced.

Here's how to use the scrolling event Window.onscroll in JavaScript to implement this back to top component. The specific effect is as follows:

IE6:

IE8:

FireFox:

First is the layout of the Html+css, the top of the page with an ID and name are page_top <a></a> as an anchor point, the reason to set the ID and name all for compatibility.

Then it is in the lower right corner of a position:fixed, content for ↑ Div, of course, you want to make a point to be able to make a picture, even make a ♂ also can, this div was initially hidden.

Finally, there is a lot of meaningless, <p>, there is nothing to say.

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >  

After the script section, everything is clear:

<script type= "Text/javascript" >
  window.onscroll = function () {
    var t = Document.documentElement.scrollTop | | Document.body.scrollTop;
    var top_div = document.getElementById ("Top_div");
    if (t >=) {
      top_div.style.display = "inline";
    }
    else {
      Top_div.style.display = ' none ';
    }
  }
</script>

There is only one scrolling event window.onscroll, which is when the user scrolls the scroll bar to trigger this event, var t = Document.documentElement.scrollTop | | Document.body.scrollTop can be compatible with the vast majority of browsers, the following t>=300 is rolled under the scroll 300px, let Top_div display, here with inline is to avoid block, will affect other styles.

Thank you for reading, I hope to help you, thank you for your support for this site!