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..932cf6d 100644 --- a/src/assets/global.css +++ b/src/assets/global.css @@ -2,6 +2,10 @@ -webkit-tap-highlight-color: transparent; } +html { + scroll-behavior: smooth; +} + .site-title { view-transition-name: site-title; transition: 0.2s ease; @@ -81,3 +85,57 @@ display: block; } } + +#back-to-top { + display: none; + position: fixed; + bottom: 20px; + right: 20px; + background-color: #fff; + color: var(--secondary-color); + width: 32px; + height: 32px; + border-radius: 100%; + border: none; + font-size: 24px; + text-decoration: none; + opacity: 0; + transition: + opacity 0.3s, + transform 0.3s; + z-index: 1000; + + &:hover { + transform: translateY(-3px); + } + + &:active { + transform: translateY(1px); + } + + img { + filter: var(--icon-secondary-filter); + } +} + +/* Use @scroll-timeline to control the display of the button */ +@supports (animation-timeline: view()) { + #back-to-top { + display: flex; + align-items: center; + justify-content: center; + animation: fadeIn 0.5s linear both; + animation-timeline: view(block 0 100vh); + } + + @keyframes fadeIn { + from { + opacity: 0; + pointer-events: none; + } + to { + opacity: 0.9; + pointer-events: auto; + } + } +} 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 +