要在 Flarum 搭建的站点中添加“返回顶部”按钮，你可以通过以下几种方法来实现：
方法一：通过扩展安装
1、安装一个现有的扩展：有一些 Flarum 扩展已经提供了“返回顶部”按钮的功能，您可以直接安装这些扩展。以下是一个常见的扩展：
- BackToTop 扩展：该扩展可以为您的站点添加返回顶部按钮，用户在滚动页面时按钮会显示，点击后会平滑滚动到页面顶部。
步骤：
2、重建缓存：
- 启用扩展后，运行以下命令清理缓存：
php flarum cache:clear
方法二：手动添加 JavaScript 和 CSS
如果你希望自定义样式或功能，可以手动添加返回顶部按钮。
1、创建一个自定义的 JavaScript 文件：在 Flarum 的目录下创建一个 JavaScript 文件（如 public/js/backtotop.js），并在文件中编写返回顶部按钮的逻辑。
// backtotop.js
document.addEventListener('DOMContentLoaded', function() {
const button = document.createElement('button');
button.innerText = '↑';
button.className = 'back-to-top';
document.body.appendChild(button);
window.onscroll = function() {
if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
button.style.display = 'block';
} else {
button.style.display = 'none';
}
};
button.onclick = function() {
window.scrollTo({ top: 0, behavior: 'smooth' });
};
});
2、创建一个自定义的 CSS 文件：在 public/css/ 目录下创建一个 backtotop.css 文件，给返回顶部按钮添加样式。
/* backtotop.css */
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
background-color: #007bff;
color: white;
border: none;
padding: 10px;
border-radius: 50%;
font-size: 20px;
display: none;
cursor: pointer;
}
.back-to-top:hover {
background-color: #0056b3;
}
3、将这些文件添加到 Flarum 中：
- 在 Flarum 的
assets 目录中，打开 extend.php 文件（如果不存在，创建一个）。
- 引入你的 JavaScript 和 CSS 文件：
// extend.php
<?php
use Flarum\Extend;
return [
(new Extend\Assets())
->addJs(__DIR__ . '/public/js/backtotop.js')
->addCss(__DIR__ . '/public/css/backtotop.css'),
];
4、清除缓存并刷新：
方法三：使用 Flarum 主题定制
如果你正在使用 Flarum 主题并希望更深入地集成该功能，可以将 JavaScript 和 CSS 直接嵌入到主题模板中。
—
这些方法可以帮助你在 Flarum 站点中轻松实现“返回顶部”按钮。选择适合你的方式，根据需求进行配置和自定义。
