在typecho中，实现实现一个包含「回到页尾」「跳到中间」「回到页首」按钮的网页效(DOUBAO)
我会在原有代码基础上新增「回到页首」按钮，并保持代码适配 Typecho 特性，以下是完整的修改后代码，直接替换原有内容即可：
适配 Typecho 的完整代码（含回到页首按钮）
<!-- 第一步：在 header.php 的 </head> 上方插入 CSS 样式 -->
<style>
/* 顶部跳转按钮样式 - 适配 Typecho 全局样式 */
.typecho-scroll-btns {
position: fixed;
top: 20px;
right: 20px; /* 靠右显示，避免遮挡 Typecho 原有头部 */
z-index: 9999; /* 高于 Typecho 其他元素 */
display: flex;
gap: 8px;
padding: 5px;
background: rgba(255, 255, 255, 0.9);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.typecho-scroll-btn {
padding: 8px 16px;
border: none;
border-radius: 4px;
background: #4285f4;
color: #fff;
font-size: 14px;
cursor: pointer;
transition: background 0.3s;
}
.typecho-scroll-btn:hover {
background: #3367d6;
}
/* 适配移动端 */
@media (max-width: 768px) {
.typecho-scroll-btns {
top: auto;
bottom: 20px;
right: 20px;
flex-wrap: wrap; /* 移动端按钮换行，避免太宽 */
justify-content: center;
}
.typecho-scroll-btn {
padding: 6px 12px;
font-size: 13px;
}
}
</style>
<!-- 第二步：在 header.php 的 <body> 标签内插入按钮 HTML（新增回到页首按钮） -->
<div class="typecho-scroll-btns">
<button class="typecho-scroll-btn" id="toTopBtn">回到页首</button>
<button class="typecho-scroll-btn" id="toMiddleBtn">跳到中间</button>
<button class="typecho-scroll-btn" id="toBottomBtn">跳到页尾</button>
</div>
<!-- 第三步：在 header.php 的 </body> 上方插入 JS 脚本（新增回到页首逻辑） -->
<script>
// 等待 DOM 加载完成（适配 Typecho 动态加载）
document.addEventListener('DOMContentLoaded', function() {
// 获取按钮元素（新增 toTopBtn）
const toTopBtn = document.getElementById('toTopBtn');
const toMiddleBtn = document.getElementById('toMiddleBtn');
const toBottomBtn = document.getElementById('toBottomBtn');
// 新增：回到页首逻辑
toTopBtn.addEventListener('click', function() {
window.scrollTo({
top: 0, // 页首位置为0
behavior: 'smooth' // 平滑滚动
});
});
// 跳到页尾
toBottomBtn.addEventListener('click', function() {
// 兼容 Typecho 不同主题的页面高度计算
const pageHeight = Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight
);
window.scrollTo({
top: pageHeight,
behavior: 'smooth'
});
});
// 跳到中间
toMiddleBtn.addEventListener('click', function() {
const pageHeight = Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight
);
const middlePos = pageHeight / 2;
window.scrollTo({
top: middlePos,
behavior: 'smooth'
});
});
// 可选：解决 Typecho 无限滚动/动态加载内容的高度误差
let lastHeight = 0;
function updatePageHeight() {
const currentHeight = Math.max(
document.body.scrollHeight,
document.documentElement.scrollHeight
);
if (currentHeight !== lastHeight) {
lastHeight = currentHeight;
}
}
// 监听滚动和加载事件，更新页面高度
window.addEventListener('scroll', updatePageHeight);
window.addEventListener('load', updatePageHeight);
});
</script>核心修改点说明
- 新增「回到页首」按钮 HTML：
在按钮容器中添加<button class="typecho-scroll-btn" id="toTopBtn">回到页首</button>，并调整按钮排序（页首→中间→页尾，符合操作习惯）。 - 新增回到页首 JS 逻辑：
获取toTopBtn元素，点击时滚动到top: 0（页首的固定位置），保持和其他按钮一致的平滑滚动效果。 - 优化移动端适配：
新增flex-wrap: wrap和justify-content: center，避免移动端按钮一行显示太宽；同时微调按钮内边距和字体大小，提升移动端体验。
额外自定义选项（按需调整）
修改按钮颜色：
若想区分不同按钮的颜色，可给「回到页首」按钮单独加样式：#toTopBtn { background: #00c851; /* 绿色 */ } #toTopBtn:hover { background: #00b248; } #toMiddleBtn { background: #ffbb33; /* 黄色 */ } #toMiddleBtn:hover { background: #ffa800; }仅在滚动后显示「回到页首」按钮：
若想让「回到页首」按钮仅在页面滚动后显示（更友好），修改 CSS 和 JS：#toTopBtn { display: none; /* 默认隐藏 */ }// 监听滚动事件，控制按钮显示/隐藏 window.addEventListener('scroll', function() { if (window.scrollY > 300) { // 滚动超过300px时显示 toTopBtn.style.display = 'block'; } else { toTopBtn.style.display = 'none'; } updatePageHeight(); // 保留原有高度更新逻辑 });调整按钮位置：
若想按钮靠左/居中显示，修改.typecho-scroll-btns的right: 20px为：- 靠左：
left: 20px - 居中：
left: 50%; transform: translateX(-50%);（需删除原有right: 20px）
- 靠左：
测试验证
保存 header.php 后刷新 Typecho 前台：
- 能看到三个按钮（回到页首、跳到中间、跳到页尾）；
- 点击「回到页首」，页面平滑滚动到最顶部；
- 移动端访问时按钮自动换行，显示正常；
- 滚动页面后（若加了隐藏逻辑），「回到页首」按钮会按需显示/隐藏。
我简化代码，仅保留页尾「回到页首」按钮，复用之前的按钮 CSS 样式，逻辑极简且适配 Typecho，直接复制到 footer.php 即可：
极简版实现代码（Typecho 页尾回到页首按钮）
打开主题目录 usr/themes/你的主题名/footer.php，在 </footer> 标签后、</body> 前插入以下代码：
<!-- 复用原有按钮CSS样式 + 页尾按钮定位 -->
<style>
/* 复用之前的按钮基础样式 */
.typecho-scroll-btn {
padding: 8px 16px;
border: none;
border-radius: 4px;
background: #4285f4;
color: #fff;
font-size: 14px;
cursor: pointer;
transition: background 0.3s;
}
.typecho-scroll-btn:hover {
background: #3367d6;
}
/* 页尾按钮固定定位 */
.back-to-top-footer {
margin: 20px auto; /* 页尾居中显示 */
display: block; /* 独占一行 */
}
</style>
<!-- 页尾回到页首按钮 -->
<button class="typecho-scroll-btn back-to-top-footer" id="backToTop">回到页首</button>
<!-- 核心JS：点击回到页首 -->
<script>
// 等待页面加载完成
document.addEventListener('DOMContentLoaded', function() {
// 获取按钮
const backToTopBtn = document.getElementById('backToTop');
// 点击事件：平滑回到页首
backToTopBtn.addEventListener('click', function() {
window.scrollTo({
top: 0,
behavior: 'smooth' // 平滑滚动，想瞬间跳转就删掉这行
});
});
});
</script>核心说明
- 样式复用：直接用之前的
.typecho-scroll-btn样式，仅新增.back-to-top-footer控制页尾按钮的排版（居中+独占一行），无需额外写样式； - JS 极简：只有「点击按钮滚动到页首」的核心逻辑，无多余监听、兼容代码，易理解易维护；
- 位置适配：按钮默认在页尾居中显示，和页尾其他内容自然衔接。
自定义调整（按需改）
按钮位置：想让按钮靠右/靠左，修改
.back-to-top-footer的样式：/* 靠右显示 */ .back-to-top-footer { margin: 20px 0 20px auto; } /* 靠左显示 */ .back-to-top-footer { margin: 20px 0; }- 取消平滑滚动：删掉 JS 里的
behavior: 'smooth'，变成瞬间跳转； 按钮颜色：想改颜色，在
.typecho-scroll-btn里改background值即可，比如：.typecho-scroll-btn { background: #00c851; /* 绿色 */ } .typecho-scroll-btn:hover { background: #00b248; }
效果验证
保存 footer.php 后刷新页面，滚动到页尾能看到「回到页首」按钮，点击后页面会平滑回到顶部，极简且满足核心需求。
(来自豆包）