# 2.8 添加回到顶部按钮

这是个比较常用的功能，当文章特别长的时候，滑到底部，需要一个返回顶部的按钮帮助一键回到顶部，增强用户体验。

同样我们也分为下面几步来实现这个功能。

## 1. 新增`top.ejs`文件

在主题目录下`layout/_partial`文件夹中新建`top.ejs`文件，存放返回顶部小模块的代码。

```markup
<div id="top">
    <a href="#">▲</a>
    <a href="#footer">▼</a>
</div>
```

## 2. 添加到页面中

回到顶部按钮一般要添加到页面的底部，于是打开主题目录下`layout/_partial/footer.ejs`文件，添加下面一句代码即可。

```
<%- partial('top') %>
```

## 3. 添加样式

打开主题目录下`source/css/_partial`的`footer.styl`文件，在最后添加如下代码。

```css
#top
  width 30px
  height 50px
  background rgba(85, 85, 85, 0.3) none repeat scroll 0% 0%
  position fixed
  bottom 1%
  right 3%
  text-align center
  cursor pointer
  a
    display block
    font-size 18px
    line-height 25px
    color #FFF
    text-decoration none
   a:hover
     background-color #258FB8
```

好了，回到顶部的基本功能就完成了，最终效果如下图所示。

![](https://2131732186-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LwGj1BtCBqfussZUC9t%2F-LwGm4SPlogRUsBnjO9e%2F-LwGmLDD_ZAhnDKMorXt%2F2016-08-27-16-09-51.png?generation=1576551410431642\&alt=media)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://hexo.course.90byte.com/mu-lu/index-1/8.-tian-jia-hui-dao-ding-bu-an-niu.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.