Warning: date(): Invalid date.timezone value 'HKT', we selected the timezone 'UTC' for now. in /home/mrgcom/public_html/catalog/controller/common/footer.php on line 48 超級簡單的頁面向上錨記標籤頁面到底判斷

The One 专一

超級簡單的頁面向上錨記標籤頁面到底判斷

下錨記

<a name="top"></a>

鏈接到錨記

<a href="#top">向上</a>

這樣頁面到底部時就可以用點擊錨鏈接到頁面頂部.

加個判斷頁面到底了,錨顯示

<script type="text/javascript">
window.onscroll=function(){
    if(document.documentElement.scrollTop + document.body.scrollTop+$(window).height() >= $(document.body).height()){
    document.getElementById("gotop").style.display="block";
    }
    else{
    document.getElementById("gotop").style.display="none";
    }
}
</script>

稍微變通下,ex:做一個按鈕,點擊頁面滾動到頂部.按鈕在頁面開始滾動時出現,頁面到底是固定

頂部div 下錨  <div name="top"></div>

鏈接按鈕,

css: #gotop{bottom: 40px;left: 50%;margin-left: 520px;position: fixed;z-index: 500;display:none;}

<a href="#top" id="gotop"><img src="向上標記的圖片"/></a>

腳本判斷,當頁面滾動到1000px 按鈕出現,當滾動到快底部時,按鈕不動.

<script type="text/javascript">
window.onscroll=function(){
    if(document.documentElement.scrollTop + document.body.scrollTop+$(window).height() < 1000 ){
    document.getElementById("gotop").style.display="none";
    }
    else{
        if((document.documentElement.scrollTop + document.body.scrollTop+$(window).height() >= $(document.body).height() -180 )){
        document.getElementById("gotop").style.display="block";document.getElementById("gotop").style.bottom="250px";}
        else{
        document.getElementById("gotop").style.display="block";}
    }
}
</script>

Powered By 爱你若晴天
身体健康 © 2017 粤ICP备14081548号-1

Article

Shopping

Search

Me