Commit 52f65d0
Changed files (3)
src
src/components/SideToolBar.astro
@@ -26,7 +26,7 @@ import DarkModeButton from './widgets/DarkModeButton.astro';
</div>
<script>
- import { scrollToTop, getReadingProgress } from '@scripts/utils';
+ import { getReadingProgress } from '@scripts/utils';
document.addEventListener('astro:page-load', () => {
const stbHide = document.getElementById('stb-hide');
@@ -42,7 +42,10 @@ import DarkModeButton from './widgets/DarkModeButton.astro';
});
stbBackToTop?.addEventListener('click', () => {
- scrollToTop();
+ window.scrollTo({
+ top: 0,
+ behavior: 'smooth',
+ });
});
window.addEventListener('scroll', () => {
src/scripts/utils.ts
@@ -1,17 +1,3 @@
-export function scrollToTop(duration: number = 500): void {
- const start = window.scrollY;
- const startTime = performance.now();
- function scrollStep(timestamp: number) {
- const currentTime = timestamp - startTime;
- const progress = Math.min(currentTime / duration, 1);
- window.scrollTo(0, start * (1 - progress));
- if (currentTime < duration) {
- window.requestAnimationFrame(scrollStep);
- }
- }
- window.requestAnimationFrame(scrollStep);
-}
-
export function getReadingProgress(): number {
const docEl = document.documentElement;
const bodyEl = document.body;
src/styles/globals.scss
@@ -7,6 +7,10 @@
font-size: 17px;
}
+html {
+ scroll-behavior: smooth;
+}
+
@layer components {
.theme-bg {
@apply bg-[var(--theme-bg-color-light)] dark:bg-[var(--theme-bg-color-dark)];