博客里有些文章太长了，有些评论太多了……总之，有些页面太高，以至于看到页面底部的时候想回到页面顶端需要翻好半天。所以想着给网站增加一个返回页首的小按钮，方便返回到页面顶部。

本来以为挺麻烦的，做了些功课之后发现，只需要一点点 HTML 代码加上合适的 CSS 样式就能搞定。

HTML 代码¶

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

所以，将下面的代码放到页面代码（如果使用的是 WordPress，就打开主题文件夹中的 footer.php）最后，</body> 标记之前就可以了。放在 </body> 之后行不行我就不知道了，也懒得去试，毕竟 </body> 之前已经很靠后了啊。

<div id="backtop"><a href="#">TOP</a></div>

注意：

1. 代码中 backtop 等下写样式的时候会用到，可以改成你喜欢且 CSS 认可的任意字符组合。
2. 可以将 TOP 改成其他文字，比如 回到顶部。

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

CSS 样式¶

不添加 CSS 样式当然也可以用，只是没那么好看，而且不实用。

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

注意：

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

如果你跟我一样用的是 WordPress，可以将上面的代码放到主题文件夹中的 style.css 文件中的最后，保存并上传。

后记¶

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

如果你还是希望用插件来解决问题，我按照上面的思路写了个简陋的小插件：Back to Top Button。

使用方法与其它 WordPress 插件一样：

1. 下载；
2. WordPress 管理后台——>插件——>安装——>上传——>激活；
3. 现在看看到主页上看看有没有跟我这里一样的一个小按钮，上面写着 TOP？！

这个 WordPress 插件非常简陋，仅仅是将上面的内容通过插件来一次性输出到页面底部了，无其他功能，甚至在管理后台中也没有弄个设置页面。而且，没有上传到 WordPress 插件网站进行审核。太简陋了，我觉得没必要送去 WordPess Plugin 里面列出来。当然，如果你要修改样式，也可以按照上面的提示进行修改。©

本文发表于水景一页。永久链接：<https://cnzhx.net/blog/back-to-top-button/>。转载请保留此信息及相应链接。