上一期教程介绍了神器Smooth-scroll，这期我们继续深入研究，为网站加入一键返回顶部按钮。

The previous tutorial introduced the artifact Smooth-scroll. In this issue, we continue to delve into the process of adding a back-to-top button in your site.

目录 / LIST

• 修改style.css | Modify style.css
• 下载SVG | Download SVG
• 添加锚点 | Adding anchor
• 一键返回顶部 | Back to top

# 修改style.css | Modify style.css

• 首先用在CSS中定义返回顶部按钮的位置和样式等信息，只需要在Hugo主题目录下static/assets的style.css文件中直接加入如下代码即可。
• Firstly we should custom the back-to-top button a single line of code directly to the style.css file in the static/assets directory of the Hugo theme.

.backtop {
    color: #b3b1b1;
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 32px;
    height: 32px;
    z-index: 999998;
}

# 下载SVG | Download SVG

• 推荐在Font Awesome这个网站现在SVG图标，点击下方链接，选择你喜欢的箭头图标，或者用其他任何图标都可以，然后点击屏幕中间的Download SVG按钮下载SVG文件。
• Recommend the SVG icon on the website of Font Awesome, click on the link below, select the arrow icon you like, or use any other icon, then click the Download SVG button in the middle of the screen to download the SVG file.

Arrow Icons | Font Awesome

• 可以使用记事本打开刚才下载的SVG文件，可以看到<svg>信息，全选拷贝到Hugo主题目录下layouts/partials中新建的arrow.html文件中。
• You can use Notepad to open the SVG file you just downloaded, you can see the <svg> information, and copy it all to the new arrow.html file in layouts/partials under the Hugo theme directory.

<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>

# 添加锚点 | Adding anchor

• 打开Hugo主题目录下layouts/partials中的head.html文件，在任意行添加如下代码，添加锚点。
• Open the head.html file in layouts/partials under the Hugo theme directory, add the following code to any line, and add an anchor point.

<span id="top"></span>

# 一键返回顶部 | Back to top

• 回到Hugo主题文件夹下的layoust/_default文件夹下的single.html文件，把下面的代码拷进到{{ define "main" }}之后。再去SSH里Hugo一下就搞定啦。
• Go back to the single.html file in the layoust/_default folder under the Hugo theme folder and copy the following code after {{ define "main" }}.

<a href="#top" class="backtop">{{ partial "arrow.html" . }}</a>

你可能会感兴趣 | Maybe interested in