Allow to scroll to top of the page (#4194)

biome.json

@@ -23,6 +23,7 @@
             "packages/emoji-codepoints/index.ts",
             "packages/icons/src/data/*.json",
             "packages/gitbook/worker-configuration.d.ts",
+            "gitbook/tsconfig.json",
             "**/*.css"
         ]
     },

packages/gitbook/src/components/PageAside/PageAside.tsx

@@ -17,6 +17,7 @@ import { ThemeToggler } from '../ThemeToggler';
 import { SideSheet } from '../primitives/SideSheet';
 import { PageAsideCloseButton } from './PageAsideButton';
 import { ScrollSectionsList } from './ScrollSectionsList';
+import { ScrollToTopButton } from './ScrollToTopButton';
 
 /**
  * Aside listing the headings in the document.
@@ -102,12 +103,12 @@ export function PageAside(props: {
             <div className="flex h-full w-full shrink-0 flex-col overflow-hidden">
                 {page.layout.outline ? (
                     <>
-                        <div className="mb-3 ml-3 flex layout-wide:3xl:hidden page-no-outline:hidden items-center justify-between max-lg:hidden layout-default:xl:hidden page-api-block:min-[96rem]:hidden">
-                            <h6 className="flex items-center gap-1 font-semibold text-tint text-xs uppercase leading-wider">
+                        <div className="mb-3 ml-3 flex page-no-outline:hidden items-center justify-between max-lg:hidden">
+                            <ScrollToTopButton className="flex cursor-pointer items-center gap-1 font-semibold text-tint text-xs uppercase leading-wider">
                                 <Icon icon="block-quote" className="size-3" />{' '}
                                 {t(language, 'on_this_page')}
-                            </h6>
-                            <PageAsideCloseButton />
+                            </ScrollToTopButton>
+                            <PageAsideCloseButton className="layout-wide:3xl:hidden layout-default:xl:hidden page-api-block:min-[96rem]:hidden" />
                         </div>
                         <div className="flex shrink flex-col overflow-hidden">
                             {document ? (

packages/gitbook/src/components/PageAside/PageAsideButton.tsx

@@ -44,7 +44,7 @@ export function PageAsideToggleButton() {
     );
 }
 
-export function PageAsideCloseButton() {
+export function PageAsideCloseButton(props: { className?: string }) {
     return (
         <Button
             icon="xmark"
@@ -54,6 +54,7 @@ export function PageAsideCloseButton() {
             onClick={() => {
                 document.body.classList.toggle(globalClassName);
             }}
+            className={props.className}
         />
     );
 }

packages/gitbook/src/components/PageAside/ScrollToTopButton.tsx

@@ -0,0 +1,18 @@
+'use client';
+import type { ComponentPropsWithRef } from 'react';
+
+export function ScrollToTopButton(props: Omit<ComponentPropsWithRef<'button'>, 'type'>) {
+    return (
+        <button
+            {...props}
+            type="button"
+            onClick={(event) => {
+                props.onClick?.(event);
+
+                if (!event.isDefaultPrevented()) {
+                    window.scrollTo({ top: 0, behavior: 'smooth' });
+                }
+            }}
+        />
+    );
+}

packages/gitbook/tsconfig.json

@@ -1,44 +1,50 @@
 {
-    "compilerOptions": {
-        "target": "esnext",
-        "lib": ["dom", "dom.iterable", "esnext"],
-        "allowJs": true,
-        "skipLibCheck": true,
-        "strict": true,
-        "noUncheckedIndexedAccess": true,
-        "noEmit": true,
-        "incremental": true,
-        "module": "esnext",
-        "esModuleInterop": true,
-        "moduleResolution": "bundler",
-        "resolveJsonModule": true,
-        "isolatedModules": true,
-        "jsx": "preserve",
-        "plugins": [
-            {
-                "name": "next"
-            }
-        ],
-        "paths": {
-            "@/*": ["./src/*"]
-        },
-        "types": [
-            "bun-types" // add Bun global
-        ]
-    },
-    "include": [
-        "next-env.d.ts",
-        ".next/types/**/*.ts",
-        "**/*.ts",
-        "**/*.tsx",
-        "types/**/*.d.ts",
-        "@gitbook/browser-types",
-        ".next/dev/types/**/*.ts"
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
     ],
-    "exclude": [
-        "node_modules",
-        "packages/openapi-parser",
-        "packages/react-openapi",
-        "packages/react-math"
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noEmit": true,
+    "incremental": true,
+    "module": "esnext",
+    "esModuleInterop": true,
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "types": [
+      "bun-types" // add Bun global
     ]
+  },
+  "include": [
+    "next-env.d.ts",
+    ".next/types/**/*.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "types/**/*.d.ts",
+    "@gitbook/browser-types",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules",
+    "packages/openapi-parser",
+    "packages/react-openapi",
+    "packages/react-math"
+  ]
 }