• slider image 145
  • slider image 140
  • slider image 142
  • slider image 143
:::

Empty Title

 

網站的右下角或右方的一個往上的箭頭,按下去就可以回到網頁頂部。

 

 

 


HTML部分

下面這一行加在 <body> 的任何處皆可

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

另外,如果你覺得往上的箭頭不夠漂亮的話你也可以自己替換成圖片。

CSS 部分

 

#gotop {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;    
    padding: 10px 15px;    
    font-size: 20px;
    background: #777;
    color: white;
    cursor: pointer;
}

因為我們要在網頁往下捲之後到一個程度才會顯示,所以預設的 display 是 none。接著要讓按鈕浮動一直固定在網頁視窗的某個地方,就要用 position: fixed,然後再利用 right 和 bottom 的值來定位在視窗的右下角。接下來就是 cursor: pointer 可以讓滑鼠移到上面是顯示連結的鼠標。

jQuery 部分

jQuery 的部分,代碼如下:(若尚未載入 jQuery library 的話,請記得載入 jQuery library)

<script type="text/javascript">
$(function(){
    $("#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");
        }
    });
});
</script>

:::

會員登入