Back to top button

src/components/Homepage/Aside/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {ShareButtons} from "/src/components/ShareButtons";
+import { ToTopButton } from '/src/components/ToTopButton'
 
 import styles from './styles.module.scss';
 import clsx from "clsx";
@@ -38,6 +39,7 @@ export default function Aside({editUrl}){
       <div className={`flex-grow-1 position-relative d-none d-lg-flex flex-column`}>
         <div className={clsx(styles.docItemAsideBottom, 'position-sticky mt-auto')}>
           <ShareButtons/>
+          <ToTopButton className="mt-24"/>
         </div>
       </div>
     </div>

src/components/ShareButtons/index.js

@@ -78,7 +78,7 @@ export const ShareButtons = ({className}) => {
               }}
       >
         Copy page link
-        {showTip && (<span className={`position-absolute top-100 end-0 mt-12 text-body`}>Copied!</span>)}
+        {showTip && (<span className={`position-absolute top-100 end-0 mt-6 text-body`}>Copied!</span>)}
       </Button>
     </div>
 )

src/components/ToTopButton/index.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import Button from '../Button'
+import clsx from 'clsx'
+import Translate from '@docusaurus/Translate';
+
+export const ToTopButton = ({ className }) => {
+
+  return (
+    <Button
+      className={clsx(className)}
+      size={`sm`}
+      icon={`arrow-top`}
+      onClick={() => {
+        if (window) {
+          window.scrollTo({ top: 0, behavior: 'smooth' })
+        }
+      }}
+    >
+      <Translate
+        id="theme.common.backToTop">
+        Back to top
+      </Translate>
+    </Button>
+  )
+}

src/theme/BlogAside/index.js

@@ -7,6 +7,7 @@ import clsx from "clsx";
 import {FeedbackForm} from "/src/components/FeedbackForm";
 
 import Translate from '@docusaurus/Translate';
+import { ToTopButton } from '../../components/ToTopButton'
 
 export default function BlogAside({editUrl}){
   return <div className={clsx(styles.docItemAside, `h-100 pt-40 pt-lg-0 ps-lg-24`)}>
@@ -27,6 +28,7 @@ export default function BlogAside({editUrl}){
       <div className={`flex-grow-1 position-relative d-none d-lg-flex flex-column`}>
         <div className={clsx(styles.docItemAsideBottom, 'position-sticky mt-auto')}>
           <ShareButtons/>
+          <ToTopButton className="mt-24"/>
         </div>
       </div>
     </div>

src/theme/DocItem/Aside/index.js

@@ -12,6 +12,7 @@ import MoreActions from "@theme/DocItem/MoreActions";
 
 import clsx from "clsx";
 import styles from './styles.module.scss';
+import { ToTopButton } from '../../../components/ToTopButton'
 
 const DocTOCDesktop = () => {
 	const {frontMatter, toc} = useDoc();
@@ -32,6 +33,7 @@ export default function DocItemAside() {
 			<div className={`flex-grow-1 position-relative d-flex flex-column`}>
 				<div className={clsx(styles.docItemAsideBottom, 'position-sticky mt-auto')}>
 					<ShareButtons />
+          <ToTopButton className="mt-24"/>
 				</div>
 			</div>
  		</div>