给网站增加一个返回顶部的小按钮

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

本来以为挺麻烦的,做了些功课之后发现,只需要一点点 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/>。转载请保留此信息及相应链接。

19 条关于 “给网站增加一个返回顶部的小按钮” 的评论

    • 你这是拿到新手机了一次玩个痛快是吧。呵呵,莫非是爱不释手?

  1. 你好,非常感谢您的文章,很简洁,但是有个问题,我的站是zencar程序,产品页面是 /**.html, 如果点这个按钮,就立马回到网站首页了而不是该产品页首页,不像WP程序的URL,请问怎么解决呢?

    • 不应该发生你说的这样的事情。可能是别的原因吧。
      我的讨论区用的是 UseBB,也有类似的 url 模式。刚才我加了个 TOP 链接在页面最底下(只有文字)。你可以去点击看看。

      • 非常感谢您的回复,你说的top链接我没找到呢,我的问题就是:在首页点TOP 可以回到首页,如果是产品页,点的话,鼠标放在TOP上显示的链接是:http://www.域名.com/#,而不是http://www.域名.com/*****.html#. 所以才不能回到顶部,请问怎么解决呢?谢谢啦!

        • 我非常明白你的意思。拜托你仔细看我的回复。
          P.S. 那个 TOP 链接在页面的最下面居中的位置,不是很明显。

  2. 谢谢分享,用上了。而且代码解释得好详细,完全照做,根本用不上插件。

  3. 用上了楼主的返回顶部按钮,没想到竟然自适应了网站的主色调,好屌好屌

时间过去太久,评论已关闭。
如果您有话要说,请到讨论区留言并给出此文章链接。
谢谢您的理解 :-)