diff --git a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
index 17e81f22c..93bd3b6a3 100644
--- a/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
+++ b/packages/frontend/core/src/pages/workspace/detail-page/detail-page.tsx
@@ -27,13 +27,14 @@ import {
 } from '@toeverything/infra';
 import clsx from 'clsx';
 import { useSetAtom } from 'jotai';
-import type { ReactElement } from 'react';
+import type { KeyboardEventHandler, ReactElement } from 'react';
 import {
   memo,
   useCallback,
   useEffect,
   useLayoutEffect,
   useMemo,
+  useRef,
   useState,
 } from 'react';
 import { useParams } from 'react-router-dom';
@@ -202,6 +203,17 @@ const DetailPageImpl = memo(function DetailPageImpl() {
   );
 
   const isWindowsDesktop = environment.isDesktop && environment.isWindows;
+  const scrollableRef = useRef<HTMLDivElement>(null);
+  const keydownHandler: KeyboardEventHandler = useCallback(e => {
+    // prevent pgup/pgdown from scrolling the page
+    if (e.key === 'PageUp' || e.key === 'PageDown') {
+      e.preventDefault();
+      scrollableRef.current?.scrollBy({
+        top: e.key === 'PageUp' ? -window.innerHeight : window.innerHeight,
+        behavior: 'smooth',
+      });
+    }
+  }, []);
 
   return (
     <>
@@ -218,6 +230,8 @@ const DetailPageImpl = memo(function DetailPageImpl() {
             <TopTip pageId={currentPageId} workspace={currentWorkspace} />
             <Scrollable.Root>
               <Scrollable.Viewport
+                ref={scrollableRef}
+                onKeyDown={keydownHandler}
                 className={clsx(
                   'affine-page-viewport',
                   styles.affineDocViewport,