博客有的文章太长wordpress回到顶部插件，有的评论太多……总之，有的页面太高了，看到底部的时候需要很长时间才能回到页面顶部页。于是想着在网站上加个小按钮返回页首，方便返回页首。

本以为会很麻烦，但做了一些功课后，发现只需要一点 HTML 代码和适当的 CSS 样式就可以了。

内容

HTML 代码

通过在页面的任意位置添加指向# 的链接，您可以单击该链接返回页面顶部。这种方法再简单不过了。看了很多地方介绍，真是让我这种懒人皱眉。

所以，把下面的代码放在页面代码中（如果你使用，打开主题文件夹中的.php），最后，放在标签之前。不知道以后能不能用，也懒得尝试了，毕竟之前已经很晚了。

注意：

在代码中，会在写样式的时候用到，可以改成你喜欢的，CSS认可的任意字符组合。 TOP可以改成其他文字wordpress网站制作，比如回到顶部。

如果你像我一样作为博客平台使用，可以在你使用的主题的.php中找到添加这行代码的地方。

CSS 样式

你当然可以在不添加 CSS 样式的情况下使用它wordpress做网站，但它不那么漂亮，也不实用。

为什么？因为我们想让这个小按钮停留在浏览器底部，而不是页面底部（当然也可以像新浪微博一样放在右边中间，只是为了修改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; /* 文字颜色 */
}

注意：

上面的代码应该和前面的 HTML 代码一样。 /*和*/之间的部分是注释，可以根据注释修改前面的数字来调整小按钮的样式。

如果你和我一样使用，可以把上面的代码放在主题文件夹中style.css文件的最后，保存上传。

后记

如果修改后看不到页面右下角类似水景的小按钮，按Ctrl+F5刷新页面试试看。如果一次不行，那就两次，如果两次不行，请留言。

如果你还想用插件解决问题，我按照上面的思路写了一个简单的小插件：返回顶部。

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

下载；管理 -> 插件 -> 安装 -> 上传 -> 激活；现在看看首页wordpress回到顶部插件，看看有没有像我这样的小按钮，上面写着TOP？ ！

这个插件非常简陋。它只通过插件一次将上述内容输出到页面底部。没有其他功能，管理后台也没有设置页面。此外，没有上传到插件站点进行审查。太简陋了，我觉得没必要发上来。当然，如果要修改样式，也可以按照上面的提示进行修改。 ©

这篇文章发表在 页面上。固定链接：。转载请保留此信息及相关链接。

文章来自互联网，侵权请联系删除，文章阐述观点来自文章出处，并不代表本站观点。 www.8001717.cn

返回