Vanilla Back To Top，微小简单的返回顶部按钮插件

豆浆加辣

推荐一个简单而微小的返回顶部按钮【Vanilla Back To Top】，不想自己写/不知道怎么写的情况下可以直接引用。

无依赖性：纯 JavaScript 编写，不需要 jQuery 或其他第三方库。
自适应隐藏：仅当用户滚动到一定程度时才显示，保持界面清爽。
平滑滚动：点击按钮后，提供材料设计风格的平滑回顶效果。
广泛的浏览器支持：确保即使是老版浏览器的用户也能享受良好体验。
高度可定制：包括图标、大小、颜色等，以适应不同的视觉风格。
简易集成：只需几行代码即可为你的网站增添这一实用功能。

实现代码

<script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js"></script>
<script>addBackToTop({
  diameter: 56,
  backgroundColor: 'rgb(255, 82, 82)',
  textColor: '#fff'
})</script>

使用方法

1、把以下引用放到公共HTML模板的<head>里

<script src="https://unpkg.com/vanilla-back-to-top@7.2.1/dist/vanilla-back-to-top.min.js">

2、然后把以下代码放在公共HTML模板的<body>里

<script>addBackToTop({
  diameter: 56,
  backgroundColor: 'rgb(255, 82, 82)',
  textColor: '#fff'
})</script>

各类cms以及博客系统等都具备自定义代码功能，分别放到自定义Header和自定义Javascript的设置部分里即可（结合各个系统实际情况），如果是放到自定义Javascript这种，有可能要去掉<script></script>标签包裹，不然可能会报错，或者直接放前端模板里也可以。

样式选择/修改

具体是修改第2部分代码即可，可以直接复制使用，也可以自行修改：

（默认）

<script>addBackToTop()</script>

（红色）

<script>addBackToTop({
  diameter: 56,
  backgroundColor: 'rgb(255, 82, 82)',
  textColor: '#fff'
})</script>

（文本按钮）

<script>addBackToTop({
  backgroundColor: '#fff',
  innerHTML: 'Back to Top',
  textColor: '#333'
})</script>
<style>
  #back-to-top {
    border: 1px solid #ccc;
    border-radius: 0;
    font-family: sans-serif;
    font-size: 14px;
    width: 100px;
    text-align: center;
    line-height: 30px;
    height: 30px;
  }
</style>

更多请参考：Vanilla Back To Top

kmy

还可以，直接用的话位置是相对固定的，但是我的站点右边是有侧边栏，会挡住，可以设置的吗？

豆浆加辣

@kmy 支持<style>标签的，你可以参考一下

在 Vanilla Back To Top，微小简单的返回顶部按钮插件中说：

（文本按钮）

的<style>标签配置来设置一下。

如果是被其他元素遮挡，用

zIndex: 9999; /* 显示在最顶层 */

如果是想通过移动位置避免被遮挡，用

right: 90px !important; /* 数值越大离右边越远 */

要加 !important 的，要覆盖掉默认的样式才可以，希望对您有帮助