欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS 滾動事件window.onscroll與position:fixed寫兼容IE6的回到頂部組件

 更新時間:2016年10月10日 15:11:08   作者:yongh701  
這篇文章主要介紹了JS 滾動事件window.onscroll與position:fixed寫兼容IE6的回到頂部組件的相關資料,需要的朋友可以參考下

現(xiàn)在網(wǎng)上的回到頂部組件,懂不懂就一大段讓人看不懂javascript代碼,還各種不兼容。起始這個組件,完全可以自己利用javascript的滾動事件window.onscroll與position:fixed手寫。IE6的兼容性問題主要出現(xiàn)在position:fixed上面,如何解決已經在《【CSS】IE6中的position:fixed問題與隨滾動條滾動的效果》(點擊打開鏈接)介紹過了。

下面具體說說如何利用JavaScript中的滾動事件window.onscroll實現(xiàn)這個回到頂部組件。具體效果如下:

IE6:


IE8:


FireFox:


首先是HTML+CSS的布局,在頁面的最頂部布置一個id與name皆為page_top的<a></a>作為錨點,之所以要共同設置id與name一切為了兼容。

然后就是在右下角放一個position:fixed的,內容為↑的div,當然你想搞得炫一點可以弄成一張圖片,甚至搞成♂也可以,這個div一開始是隱藏的。

最后是一大堆沒有意義的、占位置的<p>,沒什么好說的。

<!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,就是用戶滾動滾動條就會觸發(fā)這個時事件,var t = document.documentElement.scrollTop || document.body.scrollTop;能夠兼容絕大部分瀏覽器,下面的t>=300是滾動條下滾300px之后,讓top_div顯示,這里用inline是以免block,會影響其它樣式。

感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!

相關文章

  • 鍵盤上下鍵移動選擇table表格行的js代碼

    鍵盤上下鍵移動選擇table表格行的js代碼

    通過鍵盤上的上下鍵可以選擇表格行的實現(xiàn)效果代碼。思路不錯,需要的朋友可以參考下。
    2009-12-12
  • ES6/JavaScript使用技巧分享

    ES6/JavaScript使用技巧分享

    本篇文章主要給大家講解了ES6/JavaScript使用技巧,需要的朋友參考一下吧。
    2017-12-12
  • 通過JS獲取Request.QueryString()參數(shù)的值實現(xiàn)方法

    通過JS獲取Request.QueryString()參數(shù)的值實現(xiàn)方法

    下面小編就為大家?guī)硪黄ㄟ^JS獲取Request.QueryString()參數(shù)的值實現(xiàn)方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-09-09
  • postMessage及webSocket跨域方案詳解

    postMessage及webSocket跨域方案詳解

    這篇文章主要為大家介紹了postMessage及webSocket跨域方案詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-10-10
  • javascript如何實現(xiàn)create方法

    javascript如何實現(xiàn)create方法

    這篇文章主要介紹了javascript如何實現(xiàn)create方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
    2019-11-11
  • 微信小程序實現(xiàn)掃雷游戲

    微信小程序實現(xiàn)掃雷游戲

    這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)掃雷游戲,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-09-09
  • 微信小程序實現(xiàn)頁面導航的方法詳解

    微信小程序實現(xiàn)頁面導航的方法詳解

    這篇文章主要為大家詳細介紹一下微信小程序實現(xiàn)頁面導航的幾種方法以及幫助大家掌握如何使用頁面之間的導航跳轉,感興趣的可以了解一下
    2022-07-07
  • three.js中點對象(Point)和點材質(PointsMaterial)的具體使用

    three.js中點對象(Point)和點材質(PointsMaterial)的具體使用

    本文主要介紹了three.js中點對象(Point)和點材質(PointsMaterial)的具體使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2023-07-07
  • JS字典Dictionary類定義與用法示例

    JS字典Dictionary類定義與用法示例

    這篇文章主要介紹了JS字典Dictionary類定義與用法,結合實例形式分析了javascript字典Dictionary的定義、添加、移除、統(tǒng)計等相關操作技巧,需要的朋友可以參考下
    2019-02-02
  • JavaScript實現(xiàn)按鍵精靈的原理分析

    JavaScript實現(xiàn)按鍵精靈的原理分析

    這篇文章主要介紹了JavaScript實現(xiàn)按鍵精靈的原理分析,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-02-02

最新評論