From a8572ab7c6d259031bcfac5105f8748fa9d910b7 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Wed, 11 Mar 2026 18:20:38 +0800
Subject: [PATCH] feat(reader): tap notch area to scroll to top in scrolled
 mode, closes #3474 (#3510)

---
 .../src/app/reader/components/SectionInfo.tsx        | 12 ++++++++++--
 apps/readest-app/src/types/view.ts                   |  2 +-
 packages/foliate-js                                  |  2 +-
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/SectionInfo.tsx b/apps/readest-app/src/app/reader/components/SectionInfo.tsx
index 3421c65e..da286876 100644
--- a/apps/readest-app/src/app/reader/components/SectionInfo.tsx
+++ b/apps/readest-app/src/app/reader/components/SectionInfo.tsx
@@ -31,20 +31,28 @@ const SectionInfo: React.FC<SectionInfoProps> = ({
 }) => {
   const _ = useTranslation();
   const { appService } = useEnv();
-  const { hoveredBookKey, setHoveredBookKey } = useReaderStore();
+  const { hoveredBookKey, getView, setHoveredBookKey } = useReaderStore();
   const { systemUIVisible, statusBarHeight } = useThemeStore();
   const topInset = Math.max(
     gridInsets.top,
     appService?.isAndroidApp && systemUIVisible ? statusBarHeight / 2 : 0,
   );
 
+  const handleNotchClick = () => {
+    if (isScrolled) {
+      getView(bookKey)?.renderer.scrollToAnchor?.(0, 'anchor', true);
+    }
+  };
+
   return (
     <>
       <div
         className={clsx(
-          'absolute left-0 right-0 top-0 z-10',
+          'notch-area absolute left-0 right-0 top-0 z-10',
           isScrolled && !isVertical && 'bg-base-100',
         )}
+        role='none'
+        onClick={handleNotchClick}
         style={{
           height: `${topInset}px`,
         }}
diff --git a/apps/readest-app/src/types/view.ts b/apps/readest-app/src/types/view.ts
index 22288d30..489eda3d 100644
--- a/apps/readest-app/src/types/view.ts
+++ b/apps/readest-app/src/types/view.ts
@@ -81,7 +81,7 @@ export interface FoliateView extends HTMLElement {
     goTo?: (params: { index: number; anchor?: number | RangeAnchor }) => void;
     setStyles?: (css: string) => void;
     getContents: () => { doc: Document; index?: number; overlayer?: unknown }[];
-    scrollToAnchor?: (anchor: number | Range) => void;
+    scrollToAnchor?: (anchor: number | Range, reason?: string, smooth?: boolean) => void;
     addEventListener: (
       type: string,
       listener: EventListener,
diff --git a/packages/foliate-js b/packages/foliate-js
index c5587665..23215642 160000
--- a/packages/foliate-js
+++ b/packages/foliate-js
@@ -1 +1 @@
-Subproject commit c5587665ede3bda0f39794fb03c1868a11def74c
+Subproject commit 232156429d40ad066c54e1a29c485dc8be04d8fe