博客有的文章太長wordpress回到頂部插件，有的評論太多……總之，有的頁面太高了，看到底部的時候需要很長時間才能回到頁面頂部頁。于是想著在網(wǎng)站上加個小按鈕返回頁首，方便返回頁首。

本以為會很麻煩，但做了一些功課后，發(fā)現(xiàn)只需要一點 HTML 代碼和適當(dāng)?shù)?CSS 樣式就可以了。

內(nèi)容

HTML 代碼

通過在頁面的任意位置添加指向# 的鏈接，您可以單擊該鏈接返回頁面頂部。這種方法再簡單不過了?？戳撕芏嗟胤浇榻B，真是讓我這種懶人皺眉。

所以，把下面的代碼放在頁面代碼中（如果你使用，打開主題文件夾中的.php），最后，放在標簽之前。不知道以后能不能用，也懶得嘗試了，畢竟之前已經(jīng)很晚了。

注意：

在代碼中，會在寫樣式的時候用到，可以改成你喜歡的，CSS認可的任意字符組合。 TOP可以改成其他文字wordpress網(wǎng)站制作，比如回到頂部。

如果你像我一樣作為博客平臺使用，可以在你使用的主題的.php中找到添加這行代碼的地方。

CSS 樣式

你當(dāng)然可以在不添加 CSS 樣式的情況下使用它wordpress做網(wǎng)站，但它不那么漂亮，也不實用。

為什么？因為我們想讓這個小按鈕停留在瀏覽器底部，而不是頁面底部（當(dāng)然也可以像新浪微博一樣放在右邊中間，只是為了修改CSS樣式）。

將以下 CSS 代碼添加到 CSS 樣式文件的末尾：

#backtop a { /* back to top button */
	position: fixed;
	bottom: 0px; /* 小按鈕到瀏覽器底邊的距離 */
	right: 50px; /* 小按鈕到瀏覽器右邊框的距離 */
	color: #333; /* 小按鈕中文字的顏色 */
	z-index: 1000;
	background: #cfcfcf; /* 小按鈕底色 */
	padding: 10px; /* 小按鈕中文字到按鈕邊緣的距離 */
	border-radius: 4px; /* 小按鈕圓角的彎曲程度（半徑）*/
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	font-weight: normal; /* 小按鈕中文字的粗細 */
	text-decoration: none !important;
}
#backtop a:hover { /* 小按鈕上有鼠標懸停時 */
	background: #333; /* 小按鈕的底色 */
	color: #fff; /* 文字顏色 */
}

注意：

上面的代碼應(yīng)該和前面的 HTML 代碼一樣。 /*和*/之間的部分是注釋，可以根據(jù)注釋修改前面的數(shù)字來調(diào)整小按鈕的樣式。

如果你和我一樣使用，可以把上面的代碼放在主題文件夾中style.css文件的最后，保存上傳。

后記

如果修改后看不到頁面右下角類似水景的小按鈕，按Ctrl+F5刷新頁面試試看。如果一次不行，那就兩次，如果兩次不行，請留言。

如果你還想用插件解決問題，我按照上面的思路寫了一個簡單的小插件：返回頂部。

使用方式和其他插件一樣：

下載；管理 -> 插件 -> 安裝 -> 上傳 -> 激活；現(xiàn)在看看首頁wordpress回到頂部插件，看看有沒有像我這樣的小按鈕，上面寫著TOP？ ！

這個插件非常簡陋。它只通過插件一次將上述內(nèi)容輸出到頁面底部。沒有其他功能，管理后臺也沒有設(shè)置頁面。此外，沒有上傳到插件站點進行審查。太簡陋了，我覺得沒必要發(fā)上來。當(dāng)然，如果要修改樣式，也可以按照上面的提示進行修改。 ?

這篇文章發(fā)表在 頁面上。固定鏈接：。轉(zhuǎn)載請保留此信息及相關(guān)鏈接。

文章來自互聯(lián)網(wǎng)，侵權(quán)請聯(lián)系刪除，文章闡述觀點來自文章出處，并不代表本站觀點。 www.bjcthy.com

返回