fix: adjust anchor position

sanyuan0704 · Sep 24, 2022 · 2ae34ee · 2ae34ee
1 parent 86f63ca
commit 2ae34ee
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 10 deletions.
diff --git a/docs/api/config-theme.md b/docs/api/config-theme.md
@@ -264,7 +264,7 @@ export default defineConfig({
 });
 ```
 
-> In current version(v0.1.5), the `icon` only supports `github`.
+> In current version(v0.1.7), the `icon` only supports `github`.
 
 ## outlineTitle
 

diff --git a/src/runtime/sideEffects.ts b/src/runtime/sideEffects.ts
@@ -51,21 +51,21 @@ if (inBrowser()) {
             pathname === currentUrl.pathname &&
             search === currentUrl.search &&
             hash &&
-            hash !== currentUrl.hash
+            hash !== currentUrl.hash &&
+            link.classList.contains('header-anchor')
           ) {
             e.preventDefault();
             history.pushState(null, '', hash);
+            // use smooth scroll when clicking on header anchor links
+            scrollTo(link, hash, true);
             // still emit the event so we can listen to it in themes
             window.dispatchEvent(new Event('hashchange'));
-            // use smooth scroll when clicking on header anchor links
-            scrollTo(link, hash, link.classList.contains('header-anchor'));
           }
         }
       }
     },
     { capture: true }
   );
-
   window.addEventListener('hashchange', (e) => {
     e.preventDefault();
   });

diff --git a/src/shared/types/type.d.ts b/src/shared/types/type.d.ts
@@ -23,10 +23,10 @@ declare module 'island:site-data' {
 
 
 declare module 'island/client' {
-  import { ComponentType } from 'react';
+  import { ComponentType, ReactElement } from 'react';
   import { PageData, SiteData } from 'shared/types';
 
-  export const Content: ComponentType<unknown>;
+  export const Content: ComponentType<{ fallback?: ReactElement }>;
   export const usePageData: () => PageData;
   export const DataContext: React.Context<{
     data: PageData;

diff --git a/src/theme-default/logic/useAsideAnchor.ts b/src/theme-default/logic/useAsideAnchor.ts
@@ -104,7 +104,6 @@ export function useAsideAnchor(
     () => {
       if (markerRef.current) {
         markerRef.current.style.opacity = '0';
-        window.scrollTo(0, 0);
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps

diff --git a/src/theme-default/styles/doc.css b/src/theme-default/styles/doc.css
@@ -13,6 +13,20 @@
   outline: none;
 }
 
+.island-doc h1::before,
+.island-doc h2::before,
+.island-doc h3::before,
+.island-doc h4::before,
+.island-doc h5::before,
+.island-doc h6::before {
+  display: block;
+  content: '';
+  margin-top: -72px;
+  height: 72px;
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .island-doc h1 {
   letter-spacing: -0.02em;
   line-height: 40px;
@@ -22,8 +36,7 @@
 
 .island-doc h2 {
   margin: 48px 0 16px;
-  border-top: 1px solid var(--island-c-divider-light);
-  padding-top: 24px;
+  /* padding-top: 24px; */
   letter-spacing: -0.02em;
   line-height: 32px;
   font-size: 24px;