feat(theme-default): Scroll to top button on docs | enableScrollToTop (…

…#622)

.changeset/grumpy-flowers-bow.md

@@ -0,0 +1,8 @@
+---
+"@rspress/theme-default": minor
+"@rspress/shared": minor
+"@rspress/docs": patch
+---
+
+feat(theme-default): Scroll to top button on docs | enableScrollToTop
+chore(docs): weixin -> wechat

packages/document/docs/en/api/config/config-theme.mdx

@@ -557,3 +557,20 @@ export default defineConfig({
   },
 });
 ```
+
+## enableScrollToTop
+
+- Type: `boolean`
+- Default: `false`
+
+Enable scroll to top button on documentation. For example:
+
+```ts title="rspress.config.ts"
+import { defineConfig } from 'rspress/config';
+
+export default defineConfig({
+  themeConfig: {
+    enableScrollToTop: true,
+  },
+});
+```

packages/document/docs/zh/api/config/config-theme.mdx

@@ -541,3 +541,21 @@ export default defineConfig({
   },
 });
 ```
+
+## enableScrollToTop
+
+- Type: `boolean`
+- Default: `false`
+
+启用文档上的滚动到顶部按钮. 比如:
+
+```ts title="rspress.config.ts"
+import { defineConfig } from 'rspress/config';
+
+export default defineConfig({
+  themeConfig: {
+    enableScrollToTop: true,
+  },
+});
+```
+

packages/shared/src/types/defaultTheme.ts

@@ -89,6 +89,11 @@ export interface Config {
    * Whether to enable the animation for translation pages
    */
   enableContentAnimation?: boolean;
+  /**
+   * Enable scroll to top button on documentation
+   * @default false
+   */
+  enableScrollToTop?: boolean;
 }
 
 /**

packages/theme-default/src/components/ScrollToTop/index.module.scss

@@ -0,0 +1,23 @@
+.scroll-to-top {
+    z-index: 1;
+    position: fixed;
+    right: 1rem;
+    bottom: 1rem;
+    padding: 0.5rem;
+    border-radius: 9999px;
+    color: var(--rp-c-text-1);
+    border-color: var(--rp-c-text-3);
+    border-width: 0.1px;
+    background-color: var(--rp-c-bg-soft);
+    box-shadow:
+        0 1px 3px 0 var(--rp-shadow-1),
+        0 1px 2px 0 var(--rp-shadow-2);
+    transform: scale(0);
+    transition-property: transform;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 75ms;
+}
+
+.scroll-to-top.entered {
+    transform: scale(1) !important;
+}

packages/theme-default/src/components/ScrollToTop/index.tsx

@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react';
+import styles from './index.module.scss';
+
+export default function ScrollToTop() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  const handleScroll = () => {
+    const scrollTop = window.scrollY || document.documentElement.scrollTop;
+    setIsVisible(scrollTop > 0);
+  };
+
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+
+  useEffect(() => {
+    window.addEventListener('scroll', handleScroll);
+  }, []);
+
+  return (
+    <button
+      className={`${styles.scrollToTop} ${isVisible ? styles.entered : ''}`}
+      onClick={scrollToTop}
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        viewBox="0 0 24 24"
+        fill="currentColor"
+        className="w-6 h-6"
+      >
+        <path
+          fillRule="evenodd"
+          d="M11.47 2.47a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 1 1-1.06 1.06l-6.22-6.22V21a.75.75 0 0 1-1.5 0V4.81l-6.22 6.22a.75.75 0 1 1-1.06-1.06l7.5-7.5Z"
+          clipRule="evenodd"
+        />
+      </svg>
+    </button>
+  );
+}

packages/theme-default/src/layout/DocLayout/index.tsx

@@ -1,14 +1,15 @@
 import { useEffect, useState } from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import { getCustomMDXComponent } from '@theme';
-import { Content, useLocation, usePageData } from '@rspress/runtime';
+import { Content, useLocation, usePageData, NoSSR } from '@rspress/runtime';
 import { Aside } from '../../components/Aside';
 import { DocFooter } from '../../components/DocFooter';
 import { useDisableNav, useLocaleSiteData } from '../../logic';
 import { SideMenu } from '../../components/LocalSideBar';
 import { Overview } from '../../components/Overview';
 import { TabDataContext } from '../../logic/TabDataContext';
 import { QueryStatus } from '../Layout';
+import ScrollToTop from '../../components/ScrollToTop/index';
 import styles from './index.module.scss';
 
 export interface DocLayoutProps {
@@ -39,6 +40,7 @@ export function DocLayout(props: DocLayoutProps) {
   const localesData = useLocaleSiteData();
   const sidebar = localesData.sidebar || {};
   const [disableNavbar] = useDisableNav();
+  const enableScrollToTop = themeConfig.enableScrollToTop ?? false;
   // siderbar Priority
   // 1. frontmatter.sidebar
   // 2. themeConfig.locales.sidebar
@@ -110,7 +112,11 @@ export function DocLayout(props: DocLayoutProps) {
             </div>
           )}
         </div>
-
+        {enableScrollToTop && (
+          <NoSSR>
+            <ScrollToTop />
+          </NoSSR>
+        )}
         {hasAside ? (
           <div
             className={styles.asideContainer}