再次仿着游钓四方 大佬的返回样式,自己整了一个,去掉了页脚的文字返回,别说,瞬间高大上了。

返回顶部

你只需要把下面代码加到 当前主题 → footer.php 文件里, 标签之前即可。

<!-- 返回顶部按钮 开始 -->
<style>
/* 基础样式 */
#backToTop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    width: 45px;
    height: 45px;
    background: #333;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0.7;
}
#backToTop:hover {
    background: #555;
    opacity: 1;
}
</style>

<!-- 按钮 -->
<div id="backToTop">↑</div>

<!-- 滚动逻辑 -->
<script>
window.onscroll = function() {
    let topBtn = document.getElementById('backToTop');
    if (window.scrollY > 300) {
        topBtn.style.display = 'block';
    } else {
        topBtn.style.display = 'none';
    }
};

document.getElementById('backToTop').addEventListener('click', function() {
    window.scrollTo({
        top: 0,
        behavior: 'smooth'
    });
});
</script>
<!-- 返回顶部按钮 结束 -->

返回首页

<!-- 返回首页按钮 -->
<style>
#backToHome {
  position: fixed;
  bottom: 85px; /* 放在返回顶部上面 */
  right: 30px;
  z-index: 99;
  width: 45px;
  height: 45px;
  background: #333;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 45px;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.7;
  transition: all 0.3s;
}
#backToHome:hover {
  opacity: 1;
  background: #555;
}
</style>

<a id="backToHome" href="<?php $this->options->siteUrl(); ?>">⌂</a>

安装方法(超简单)

  1. 进入 Typecho 后台 → 控制台 → 外观 → 编辑当前主题
  2. 找到右侧文件列表里的 footer.php
  3. 把上面代码粘贴到</body> 标签前面
  4. 保存,刷新网站即可生效

可自定义的参数

bottom: 30px 距离底部距离
right: 30px 距离右侧距离
background: #333 按钮背景色
width: 45px 按钮大小

300 滚动多少像素后显示按钮
↑ 可以改成文字「顶部」或图标