feat: add back-to-top button and update its positioning

This commit is contained in:
Will Miao
2025-04-30 14:46:43 +08:00
parent b32756932b
commit 61f723a1f5
3 changed files with 10 additions and 8 deletions

View File

@@ -260,8 +260,8 @@
/* Back to Top Button */
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
bottom: 85px;
right: 30px;
width: 36px;
height: 36px;
border-radius: 50%;

View File

@@ -311,15 +311,12 @@ export function initFolderTagsVisibility() {
}
export function initBackToTop() {
const button = document.createElement('button');
button.className = 'back-to-top';
button.innerHTML = '<i class="fas fa-chevron-up"></i>';
button.title = 'Back to top';
document.body.appendChild(button);
const button = document.getElementById('backToTopBtn');
if (!button) return;
// Get the scrollable container
const scrollContainer = document.querySelector('.page-content');
// Show/hide button based on scroll position
const toggleBackToTop = () => {
const scrollThreshold = window.innerHeight * 0.3;

View File

@@ -76,6 +76,11 @@
{% include 'components/progress_panel.html' %}
{% block additional_components %}{% endblock %}
<!-- Add back-to-top button here -->
<button id="backToTopBtn" class="back-to-top" title="Back to top">
<i class="fas fa-chevron-up"></i>
</button>
<div class="container">
{% if is_initializing %}
<!-- Show initialization component when initializing -->