search

Home >Web Front-end >JS Tutorial >JS scroll event window.onscroll and position: fixed write a back to top component compatible with IE6

JS scroll event window.onscroll and position: fixed write a back to top component compatible with IE6

高洛峰
高洛峰Original
2016-12-29 10:12:031586browse

Nowadays, if you understand the back-to-top component on the Internet, there is a large section of javascript code that is incomprehensible, and there are various incompatibilities. To start this component, you can completely use JavaScript's scroll event window.onscroll and position: fixed handwriting. The compatibility problem of IE6 mainly occurs in position: fixed. How to solve it has been introduced in "[CSS] Position: fixed problem in IE6 and the effect of scrolling with the scroll bar" (click to open the link).

Let’s talk about how to use the scroll event window.onscroll in JavaScript to implement this back to top component. The specific effects are as follows:

IE6:

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

IE8:

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

FireFox:

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

The first is the layout of HTML+CSS. Arrange an 3499910bf9dac5ae3c52d5ede73834855db79b134e9f6b82c0b36e0489ee08ed with both the id and name of page_top at the top of the page as an anchor point. The reason why it must be common Set the id and name for compatibility.

Then put a div with position: fixed and the content ↑ in the lower right corner. Of course, if you want to make it more dazzling, you can make it a picture, or even ♂. This div starts with hidden.

In the end, there are a lot of meaningless e388a4556c0f65e1904146cc1a846bee that take up space and have nothing to say. 

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

After the script part, everything is very 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 >= 300) {
      top_div.style.display = "inline";
    }
    else {
      top_div.style.display = "none";
    }
  }
</script>

There is only one scroll event window.onscroll, which is triggered when the user scrolls the scroll bar, var t = document. documentElement.scrollTop || document.body.scrollTop; is compatible with most browsers. The following t>=300 is to let the top_div display after the scroll bar scrolls down 300px. Inline is used here to avoid blocking, which will affect other styles.

Thank you for reading, I hope it can help you, thank you for your support of this site!

For more JS scrolling events window.onscroll and position: fixed, write a back-to-top component that is compatible with IE6. For related articles, please pay attention to the PHP Chinese website!


Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：JavaScript performance optimization: function throttling (throttle) and function debounce (debounce)Next article：JavaScript performance optimization: function throttling (throttle) and function debounce (debounce)

Related articles

See more