當一頁網頁的頁面高度高到一定程度時,這時若能出現貼心的「Go to top」的按紐,想必對網站的瀏覽體驗會加分不少。

 

一、在以下範例展示的是:

1.在特定高度範內,此「Back to top」按紐不會出現。

2.當瀏覽者超出此特定高度範圍之外,按紐才會出現。

 

二、程式碼部份

1.HTML

<div class="container">
    <div class="row">
        <div class="span12">
            <div style="border:1px dashed #ccc;min-height:1900px;">
                <p>若捲動畫面時,捲動的高度超出700px,才出現「Back to top」的按紐。</p>
            </div>
            <div class="top">
                <class="btn btn-inverse btn-large" href="#"><class="icon-chevron-up icon-white"></iBack to top</a>
            </div>
        </div>
    </div>
</div>

2.Jquery:

$(document).ready(function(){
    $(document).scroll(function(){
        var _jumpOutHeight 700;
        //取得目前捲動的高度
        var height $(document).scrollTop();
        if (height _jumpOutHeight && $(".top").css("display"== "none" {
            $(".top").fadeIn(500);
        
        if (height _jumpOutHeight && $(".top").css("display"== "block" {
            $(".top").fadeOut(500);
        }
    });
});

3.CSS

.top
{
    display:none;
    position:fixed;
    bottom:100px;
    right:10px;
}

範例展示demo:

http://jsfiddle.net/pinylnln/nZ7gb/6/show/

創作者介紹

Piny's blog

pinylnln 發表在 痞客邦 PIXNET 留言(0) 人氣()