From 348192f1b9f4954f692e4d52e895ae57268d4eb2 Mon Sep 17 00:00:00 2001 From: Steven Lynn Date: Tue, 6 Aug 2024 17:46:59 +0800 Subject: [PATCH 1/3] add backToTop button --- src/assets/global.css | 30 ++++++++++++++++++++++++++++++ src/layouts/base.astro | 18 ++++++++++++++++-- src/lib/backToTop.js | 23 +++++++++++++++++++++++ 3 files changed, 69 insertions(+), 2 deletions(-) create mode 100644 src/lib/backToTop.js 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) From 2007b6392f3ab8dc693c699b1a56bc989d5974d1 Mon Sep 17 00:00:00 2001 From: Steven Lynn Date: Tue, 6 Aug 2024 21:37:17 +0800 Subject: [PATCH 2/3] removed backToTop.js --- src/assets/global.css | 53 +++++++++++++++++++++++++++++++++++------- src/layouts/base.astro | 13 +++++++---- src/lib/backToTop.js | 23 ------------------ 3 files changed, 53 insertions(+), 36 deletions(-) delete mode 100644 src/lib/backToTop.js diff --git a/src/assets/global.css b/src/assets/global.css index 03b4339..198fdfe 100644 --- a/src/assets/global.css +++ b/src/assets/global.css @@ -134,22 +134,59 @@ height: 50px; border-radius: 50%; border: none; - cursor: pointer; - display: none; /* 初始状态隐藏 */ + display: flex; align-items: center; justify-content: center; font-size: 24px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + text-decoration: none; + opacity: 0; + transition: + opacity 0.3s, + transform 0.3s; + cursor: pointer; z-index: 1000; - transition: all 0.3s ease; /* 添加过渡效果 */ +} + +/* 使用 @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: #d0c3b4; /* 稍微深一点的颜色作为悬停效果 */ - transform: translateY(-3px); /* 悬停时稍微上移 */ + background-color: #b0a295; + transform: translateY(-3px); } #back-to-top:active { - transform: translateY(1px); /* 点击时下移，创造按压效果 */ - box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); /* 减小阴影 */ + 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 4be7a3f..c82e798 100644 --- a/src/layouts/base.astro +++ b/src/layouts/base.astro @@ -73,8 +73,7 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT') {...seoParams} /> - +
@@ -125,9 +124,13 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT')
- + diff --git a/src/lib/backToTop.js b/src/lib/backToTop.js deleted file mode 100644 index cee4692..0000000 --- a/src/lib/backToTop.js +++ /dev/null @@ -1,23 +0,0 @@ -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) From 3e122dbd3920906f9274df8482e5d28cb4051303 Mon Sep 17 00:00:00 2001 From: Steven Lynn Date: Wed, 7 Aug 2024 19:23:11 +0800 Subject: [PATCH 3/3] add back-to-top.svg --- src/assets/back-to-top.svg | 10 ++++++++++ src/layouts/base.astro | 20 ++++---------------- 2 files changed, 14 insertions(+), 16 deletions(-) create mode 100644 src/assets/back-to-top.svg 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/layouts/base.astro b/src/layouts/base.astro index c82e798..06b0b53 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' --- @@ -124,22 +126,8 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT') - - - - + + Back to Top