add back to top button

packages/logos-docusaurus-theme/src/client/css/custom.scss

@@ -489,6 +489,14 @@ small {
   display: none;
 }
 
+.footer {
+  position: relative;
+}
+
+.theme-back-to-top-button {
+  display: none !important;
+}
+
 .footer__link-item {
   display: inline-block;
 }
@@ -562,6 +570,10 @@ small {
   .theme-admonition {
     display: block !important;
   }
+
+  .footer {
+    padding-bottom: 0px !important;
+  }
 }
 
 @include utils.responsive('sm', 'down') {
@@ -707,7 +719,7 @@ small {
 }
 
 .footer {
-  margin-bottom: 40px;
+  margin-bottom: 18px;
   width: 100% !important;
   padding-inline: 0;
 

packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/index.tsx

@@ -1,11 +1,19 @@
 import React from 'react'
 import clsx from 'clsx'
 import styles from './styles.module.scss'
+import { Button } from '@acid-info/lsd-react'
 
 export default function FooterLayout({ style, links, logo, copyright }) {
   const firstRow = [...links.props.links.slice(0, 2)]
   const secondRow = [...links.props.links.slice(2)]
 
+  const handleScrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    })
+  }
+
   return (
     <footer
       className={clsx('footer', {
@@ -27,6 +35,13 @@ export default function FooterLayout({ style, links, logo, copyright }) {
         <div className="footer__bottom text--center">Logos Collective</div>
         {React.cloneElement(links, { links: secondRow })}
       </div>
+      <Button
+        className={styles.backToTop}
+        size="small"
+        onClick={handleScrollToTop}
+      >
+        Back to top ↑
+      </Button>
     </footer>
   )
 }

packages/logos-docusaurus-theme/src/client/theme/Footer/Layout/styles.module.scss

@@ -13,9 +13,23 @@
   border-top: 1px solid rgb(var(--lsd-border-primary));
 }
 
+.backToTop {
+  width: fit-content;
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+}
+
 @include utils.responsive('lg', 'down') {
   .firstRow {
     width: 100vw;
     margin-left: -16px !important;
   }
+
+  .backToTop {
+    margin-top: 76px !important;
+    position: relative;
+    bottom: 16px;
+    left: 16px;
+  }
 }