黑寶的電腦教學網

:::

浮動式固定上選單

將footer 浮動固定在網頁下方 next

DREAMWEAVER
===========

<div class="article"> <article>網站的右下角或右方的一個往上的箭頭，按下去就可以回到網頁頂部。

<div class="gad"> </div>   
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）

```

</article> </div>

:::

主選單

會員登入

MarkDown

主選單

會員登入