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

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

高洛峰

Release： 2016-12-29 10:12:03

Original

1504 people have browsed it

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

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>

Copy after login

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>

Copy after login

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!