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

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

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

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

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

IE6:


IE8:


FireFox:


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

然后就是在右下角放一個(gè)position:fixed的,內(nèi)容為↑的div,當(dāng)然你想搞得炫一點(diǎn)可以弄成一張圖片,甚至搞成♂也可以,這個(gè)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><!--回到頂部的錨點(diǎn)-->
 <div id="top_div"><a href="#page_top" style="text-decoration:none">↑</a></div>
 <p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</p>
 <p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</p>
 <p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</p>
 <p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</p>
 <p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</p><p>占位置的內(nèi)容</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>

僅有一個(gè)滾動(dòng)事件window.onscroll,就是用戶滾動(dòng)滾動(dòng)條就會(huì)觸發(fā)這個(gè)時(shí)事件,var t = document.documentElement.scrollTop || document.body.scrollTop;能夠兼容絕大部分瀏覽器,下面的t>=300是滾動(dòng)條下滾300px之后,讓top_div顯示,這里用inline是以免block,會(huì)影響其它樣式。

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

相關(guān)文章

  • 鍵盤上下鍵移動(dòng)選擇table表格行的js代碼

    鍵盤上下鍵移動(dòng)選擇table表格行的js代碼

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

    ES6/JavaScript使用技巧分享

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

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

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

    postMessage及webSocket跨域方案詳解

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

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

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

    微信小程序?qū)崿F(xiàn)掃雷游戲

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

    微信小程序?qū)崿F(xiàn)頁面導(dǎo)航的方法詳解

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

    three.js中點(diǎn)對(duì)象(Point)和點(diǎn)材質(zhì)(PointsMaterial)的具體使用

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

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

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

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

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

最新評(píng)論