diff --git a/src/assets/global.css b/src/assets/global.css index 1af9f8a..03b4339 100644 --- a/src/assets/global.css +++ b/src/assets/global.css @@ -123,3 +123,33 @@ display: block; } } + +#back-to-top { + position: fixed; + bottom: 20px; + right: 20px; + background-color: #dfd3c3; + color: #333; + width: 50px; + height: 50px; + border-radius: 50%; + border: none; + cursor: pointer; + display: none; /* 初始状态隐藏 */ + align-items: center; + justify-content: center; + font-size: 24px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + z-index: 1000; + transition: all 0.3s ease; /* 添加过渡效果 */ +} + +#back-to-top:hover { + background-color: #d0c3b4; /* 稍微深一点的颜色作为悬停效果 */ + transform: translateY(-3px); /* 悬停时稍微上移 */ +} + +#back-to-top:active { + transform: translateY(1px); /* 点击时下移，创造按压效果 */ + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); /* 减小阴影 */ +} diff --git a/src/layouts/base.astro b/src/layouts/base.astro index a6959b1..4be7a3f 100644 --- a/src/layouts/base.astro +++ b/src/layouts/base.astro @@ -73,7 +73,9 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT') {...seoParams} /> - + +
@@ -123,7 +125,19 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT')
- + diff --git a/src/lib/backToTop.js b/src/lib/backToTop.js new file mode 100644 index 0000000..cee4692 --- /dev/null +++ b/src/lib/backToTop.js @@ -0,0 +1,23 @@ +function setupBackToTop() { + const backToTopButton = document.querySelector('#back-to-top') + + // Toggle button visibility based on scroll position + const toggleBackToTopButton = () => { + backToTopButton.style.display = window.scrollY > 300 ? 'flex' : 'none' + } + + // Attach scroll event listener to window + window.addEventListener('scroll', toggleBackToTopButton) + toggleBackToTopButton() // Initial check for button visibility + + // Smooth scroll to top when button is clicked + backToTopButton.addEventListener('click', () => { + window.scrollTo({ + top: 0, + behavior: 'smooth', + }) + }) +} + +// Initialize the functionality once page is fully loaded +document.addEventListener('DOMContentLoaded', setupBackToTop)