diff --git a/src/assets/back-to-top.svg b/src/assets/back-to-top.svg new file mode 100644 index 0000000..13c746b --- /dev/null +++ b/src/assets/back-to-top.svg @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/src/assets/global.css b/src/assets/global.css index 3104f5f..53f5b20 100644 --- a/src/assets/global.css +++ b/src/assets/global.css @@ -81,3 +81,70 @@ 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; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + text-decoration: none; + opacity: 0; + transition: + opacity 0.3s, + transform 0.3s; + cursor: pointer; + z-index: 1000; +} + +/* 使用 @scroll-timeline 控制按钮的显示 */ +@supports (animation-timeline: scroll()) { + @scroll-timeline buttonVisibility { + source: auto; + orientation: vertical; + scroll-offsets: 0%, 100px; + } + + #back-to-top { + animation: fadeIn 0.5s linear both; + animation-timeline: buttonVisibility; + } + + @keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } + } +} + +#back-to-top:hover { + background-color: #b0a295; + transform: translateY(-3px); +} + +#back-to-top:active { + transform: translateY(1px); +} + +/* 为不支持 @scroll-timeline 的浏览器提供的回退样式 */ +@supports not (animation-timeline: scroll()) { + #back-to-top { + display: none; + } +} + +/* CSS Scroll Behavior 实现返回顶部的平滑滚动 */ +html { + scroll-behavior: smooth; +} diff --git a/src/layouts/base.astro b/src/layouts/base.astro index a377e81..e6af8b2 100644 --- a/src/layouts/base.astro +++ b/src/layouts/base.astro @@ -42,6 +42,8 @@ const seoParams = { const HEADER_INJECT = getEnv(import.meta.env, Astro, 'HEADER_INJECT') const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT') + +const backToTopIcon = 'src/assets/back-to-top.svg' --- @@ -74,6 +76,7 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT') /> +
@@ -123,7 +126,9 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT')
- + + Back to Top +