以Toha主题为例

修改style.css

首先用在CSS中定义返回顶部按钮的位置和样式等信息，只需要在Hugo根目录下static/css/style.css文件中直接加入如下代码即可。

/* 添加返回顶部 */
.backtop {
    color: #b3b1b1;
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 32px;
    height: 32px;
    z-index: 999998;
}

下载SVG

  1. 推荐在Font Awesome这个网站下载SVG图标，选择你喜欢的箭头图标，或者用其他任何图标都可以，然后点击屏幕中间的Download SVG按钮下载SVG文件。
  2. 可以使用记事本打开刚才下载的SVG文件，可以看到<svg>信息，全选拷贝到Hugo根目录下layouts/partials中新建的arrow.html文件中。
<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="chevron-circle-up" class="svg-inline--fa fa-chevron-circle-up fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
    <path fill="currentColor" d="M8 256C8 119 119 8 256 8s248 111 248 248-111 248-248 248S8 393 8 256zm231-113.9L103.5 277.6c-9.4 9.4-9.4 24.6 0 33.9l17 17c9.4 9.4 24.6 9.4 33.9 0L256 226.9l101.6 101.6c9.4 9.4 24.6 9.4 33.9 0l17-17c9.4-9.4 9.4-24.6 0-33.9L273 142.1c-9.4-9.4-24.6-9.4-34 0z">
    </path>
</svg>

添加锚点

打开Hugo根目录下layouts/partials/head.html文件，在任意行添加如下代码，添加锚点。

<!--添加返回顶部锚点-->
<span id="top"></span>

一键返回顶部

回到Hugo根文件夹下的layoust/_default/single.html文件，把下面的代码拷进到{{ define “content” }}之后。保存即可。

<!--添加返回顶部-->
<a href="#top" class="backtop">{{ partial "arrow.html" . }}</a>