Piny's blog

當一頁網頁的頁面高度高到一定程度時，這時若能出現貼心的「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">
                <a class="btn btn-inverse btn-large" href="#"><i class="icon-chevron-up icon-white"></i> Back 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/