diff --git a/gatsby-config.js b/gatsby-config.js
index aa403a26c7bd398c826f99c781680f963d24f778..cc1f6e49fcb4de70f21cad345ffbf08d5116abbc 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -27,7 +27,12 @@ module.exports = {
       resolve: 'gatsby-transformer-remark',
       options: {
         plugins: [
-          `gatsby-remark-autolink-headers`,
+          {
+            resolve: `gatsby-remark-autolink-headers-j`,
+            options: {
+              offsetY: 84
+            }
+          },
           {
             resolve: `gatsby-remark-prismjs`,
             options: {
diff --git a/package-lock.json b/package-lock.json
index 99daf6729d1e638f5efbdf963151c96364b9b114..75227bc6f5acddb7fb296e810c1137b4578e44be 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,7 +21,7 @@
         "gatsby-plugin-robots-txt": "^1.7.0",
         "gatsby-plugin-sass": "^5.7.0",
         "gatsby-plugin-sitemap": "^5.7.0",
-        "gatsby-remark-autolink-headers": "^5.7.0",
+        "gatsby-remark-autolink-headers-j": "^1.0.0",
         "gatsby-remark-prismjs": "^6.7.0",
         "gatsby-source-filesystem": "^4.7.0",
         "gatsby-transformer-remark": "^5.7.0",
@@ -8991,10 +8991,10 @@
         "react-dom": "^16.9.0 || ^17.0.0"
       }
     },
-    "node_modules/gatsby-remark-autolink-headers": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/gatsby-remark-autolink-headers/-/gatsby-remark-autolink-headers-5.8.0.tgz",
-      "integrity": "sha512-TdOF2sDq7hvFpVtC/b4yl7mdFwvbomPCmxR/E0afVKW7EnE0ksFch9ol5zqN2d3A+a9DXsKjphvltthy5si85g==",
+    "node_modules/gatsby-remark-autolink-headers-j": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gatsby-remark-autolink-headers-j/-/gatsby-remark-autolink-headers-j-1.0.0.tgz",
+      "integrity": "sha512-N1LiMIQtu1TF+2dP+ht7Y5J30K377x1azzaKM82zPsge59DsbnOS3tE0urc+kZK6PJx+BCcruo+AYmexlrtuEg==",
       "dependencies": {
         "@babel/runtime": "^7.15.4",
         "github-slugger": "^1.3.0",
@@ -9007,8 +9007,8 @@
       },
       "peerDependencies": {
         "gatsby": "^4.0.0-next",
-        "react": "^16.9.0 || ^17.0.0",
-        "react-dom": "^16.9.0 || ^17.0.0"
+        "react": "^16.9.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.9.0 || ^17.0.0 || ^18.0.0"
       }
     },
     "node_modules/gatsby-remark-prismjs": {
@@ -27615,10 +27615,10 @@
         "prop-types": "^15.7.2"
       }
     },
-    "gatsby-remark-autolink-headers": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/gatsby-remark-autolink-headers/-/gatsby-remark-autolink-headers-5.8.0.tgz",
-      "integrity": "sha512-TdOF2sDq7hvFpVtC/b4yl7mdFwvbomPCmxR/E0afVKW7EnE0ksFch9ol5zqN2d3A+a9DXsKjphvltthy5si85g==",
+    "gatsby-remark-autolink-headers-j": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/gatsby-remark-autolink-headers-j/-/gatsby-remark-autolink-headers-j-1.0.0.tgz",
+      "integrity": "sha512-N1LiMIQtu1TF+2dP+ht7Y5J30K377x1azzaKM82zPsge59DsbnOS3tE0urc+kZK6PJx+BCcruo+AYmexlrtuEg==",
       "requires": {
         "@babel/runtime": "^7.15.4",
         "github-slugger": "^1.3.0",
diff --git a/package.json b/package.json
index 1665a4c8d08ce025d9a218f7eafb339889574f29..d63f20450165f26ca91fa8cab467a8190a819928 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "gatsby-plugin-robots-txt": "^1.7.0",
     "gatsby-plugin-sass": "^5.7.0",
     "gatsby-plugin-sitemap": "^5.7.0",
-    "gatsby-remark-autolink-headers": "^5.7.0",
+    "gatsby-remark-autolink-headers-j": "^1.0.0",
     "gatsby-remark-prismjs": "^6.7.0",
     "gatsby-source-filesystem": "^4.7.0",
     "gatsby-transformer-remark": "^5.7.0",
diff --git a/src/templates/components/docToc.js b/src/templates/components/docToc.js
index f367594fef08e5c584f0f03eca494597585ca982..55abee28c39cf3044eb786462c4464c9a901ac85 100644
--- a/src/templates/components/docToc.js
+++ b/src/templates/components/docToc.js
@@ -6,7 +6,8 @@ import { remark } from 'remark'
 import html from './remark-html'
 
 // 版本切换
-const DocToc = ({ tocNodes, pageContext }) => {
+const DocToc = (props) => {
+  const { tocNodes, pageContext } = props;
   const { lang, version, docType, slug } = pageContext
   const tocRef = useRef(null)
   const tocLinkPrefix = `/${lang}/${docType}/${version}/`
@@ -52,7 +53,7 @@ const DocToc = ({ tocNodes, pageContext }) => {
     li.classList.toggle('folded')
   }
 
-  useLayoutEffect(bindClickEventToTOC, [])
+  useLayoutEffect(bindClickEventToTOC)
 
   return (
     <section