前端之旅

當使用者看網頁看到一半，

或是已經看到底部了，

若要回到最上面選擇其它頁面觀看，

這樣就又要慢慢烏龜式的滑到最上面，

此時，Top鈕是非常方便的。

製作Top鈕時，

需要先載入JQuery：

HTML只要放一行：

<div id="gotop">˄</div>

Script內：

$("#gotop").click(function(){
    jQuery("html,body").animate({
        scrollTop:0
    },1000);
});
$(window).scroll(function() {
    if ( $(this).scrollTop() > 300){
        $('#gotop').fadeIn("fast");
    } else {
        $('#gotop').stop().fadeOut("fast");
    }
});

CSS部分：

#gotop {
    position: fixed;
    border-radius: 50px;
    right: 20px;
    bottom: 30px;
    padding: 10px 16px;
    font-size: 25px;
    background: rgba(228, 211, 211, 0.36);
    color: #FAFCFD;
    cursor: pointer;
    z-index: 1000;
}

完成後如下：

右下角。