add back to top button

core/src/components/Footer.astro

@@ -92,3 +92,14 @@ const footerMenu = await getEntry('menus', 'footer');
     </Container>
   </div>
 </footer>
+<div class="fixed right-0 bottom-0 left-0 z-50">
+  <Container class="relative">
+    <a
+      href="#"
+      id="scroll-to-top"
+      class="bg-nix-blue-darker hover:bg-nix-blue-dark absolute right-4 bottom-4 z-50 rounded-xl text-white drop-shadow-md transition-all duration-100 md:-right-14 md:bottom-8"
+    >
+      <Icon class="h-14 w-14 p-1" name="mdi:keyboard-arrow-up" />
+    </a>
+  </Container>
+</div>

core/src/layouts/Layout.astro

@@ -84,6 +84,7 @@ const headFeedLinks = blogMenu.data.map((e) => {
       import '@fontsource-variable/overpass';
       import '@fontsource-variable/fira-code';
       import '@fontsource-variable/roboto-flex/wdth.css';
+      import '@/lib/client/scrollToTopHandler.js';
     </script>
 
     <style>

core/src/lib/client/scrollToTopHandler.js

@@ -0,0 +1,42 @@
+const scrollTop = document.getElementById('scroll-to-top');
+scrollTop.classList.add('opacity-0');
+
+document.addEventListener('scroll', () => {
+  const scrollPosition = window.scrollY;
+  const scrollPositionBottom = scrollPosition + window.innerHeight;
+  if (scrollPositionBottom > document.body.offsetHeight - 10) {
+    scrollTop.classList.remove(
+      'bottom-4',
+      'md:bottom-8',
+      'md:-right-14',
+      'right-4',
+      'bg-nix-blue-darker',
+    );
+    scrollTop.classList.add(
+      'md:bottom-4',
+      'right-1/2',
+      'translate-x-1/2',
+      'bottom-0',
+    );
+  } else {
+    scrollTop.classList.remove(
+      'md:bottom-4',
+      'right-1/2',
+      'translate-x-1/2',
+      'bottom-0',
+    );
+    scrollTop.classList.add(
+      'bottom-4',
+      'md:bottom-8',
+      'md:-right-14',
+      'right-4',
+      'bg-nix-blue-darker',
+    );
+  }
+
+  if (scrollPosition > 100) {
+    scrollTop.classList.remove('opacity-0');
+  } else {
+    scrollTop.classList.add('opacity-0');
+  }
+});

eslint.config.mjs

@@ -10,7 +10,10 @@ export default defineConfig([
     "core/*.{js,mjs,cjs,ts}",
     "core/src/**/*.{js,mjs,cjs,ts}",
   ], languageOptions: { globals: globals.node } },
-  { files: ["core/public/**/*.{js,mjs,cjs,ts}"], languageOptions: { globals: globals.browser } },
+  { files: [
+    "core/public/**/*.{js,mjs,cjs,ts}",
+    "core/src/lib/client/**/*.{js,mjs,cjs,ts}",
+  ], languageOptions: { globals: globals.browser } },
   { files: ["**/*.{js,mjs,cjs,ts}"], plugins: { js }, extends: ["js/recommended"] },
   tseslint.configs.base,
   eslintPluginAstro.configs.recommended,