Skip to content

feat: 添加返回顶部按钮#30

Merged
aba2222 merged 2 commits into
aba2222:mainfrom
xiokuai:feature/back-to-top
Feb 24, 2026
Merged

feat: 添加返回顶部按钮#30
aba2222 merged 2 commits into
aba2222:mainfrom
xiokuai:feature/back-to-top

Conversation

@xiokuai
Copy link
Copy Markdown
Contributor

@xiokuai xiokuai commented Feb 23, 2026

Summary

  • 页面滚动超过 300px 后右下角显示返回顶部按钮
  • 点击平滑滚动回顶部
  • 自动适配深色/浅色主题

Comment thread forum/templates/base.html Outdated
</div>
</footer>

<a href="#" id="back-to-top" title="返回顶部" style="display:none;position:fixed;bottom:30px;right:30px;z-index:99;width:40px;height:40px;border-radius:50%;border:1px solid rgba(128,128,128,.3);background:var(--bs-body-bg);color:var(--bs-body-color);text-decoration:none;font-size:1.2rem;line-height:38px;text-align:center;opacity:.7;transition:opacity .3s"><i class="bi bi-arrow-up"></i></a>
Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

为什么这里不使用button?使用按钮而不是链接能有更好的交互,也不用在js中加入e.preventDeafult()。
论坛中所有html都有bootstrap。标签中很多style可以用bootstrap类替代,比如rounded替代border-radius:50%。

@aba2222 aba2222 merged commit 2c742fd into aba2222:main Feb 24, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants