From 391286c35bd8fe8ab9262b4e6f90027918ac461a Mon Sep 17 00:00:00 2001
From: tangly1024 <tlyong1992@hotmail.com>
Date: Wed, 6 Apr 2022 16:05:13 +0800
Subject: [PATCH] =?UTF-8?q?bug-=E6=BB=9A=E5=8A=A8=E5=88=B0=E8=AF=84?=
 =?UTF-8?q?=E8=AE=BA=E5=8C=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 themes/hexo/components/JumpToCommentButton.js | 31 ++++++++++++++-----
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/themes/hexo/components/JumpToCommentButton.js b/themes/hexo/components/JumpToCommentButton.js
index cc96497c..85d93cf0 100644
--- a/themes/hexo/components/JumpToCommentButton.js
+++ b/themes/hexo/components/JumpToCommentButton.js
@@ -1,5 +1,6 @@
-import React from 'react'
+import React, { useEffect } from 'react'
 import CONFIG_HEXO from '../config_hexo'
+let wrapperTop = 0
 
 /**
  * 跳转到评论区
@@ -10,16 +11,30 @@ const JumpToCommentButton = () => {
   if (!CONFIG_HEXO.WIDGET_TO_COMMENT) {
     return <></>
   }
-  function navToComment () {
-    const commentElement = document.getElementById('comment')
-    if (commentElement) {
-      commentElement?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
-    }
+
+  function updateHeaderHeight() {
+    setTimeout(() => {
+      if (window) {
+        const wrapperElement = document.getElementById('comment')
+        wrapperTop = wrapperElement?.offsetTop
+      }
+    }, 500)
+  }
+  function navToComment() {
+    window.scrollTo({ top: wrapperTop, behavior: 'smooth' })
+    // 兼容性不好
+    // const commentElement = document.getElementById('comment')
+    // if (commentElement) {
+    // commentElement?.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
   }
 
+  useEffect(() => {
+    updateHeaderHeight()
+  })
+
   return (<div className='flex space-x-1 items-center justify-center transform hover:scale-105 duration-200 w-7 h-7 text-center' onClick={navToComment} >
-          <i className='fas fa-comment text-xs' />
-    </div>)
+    <i className='fas fa-comment text-xs' />
+  </div>)
 }
 
 export default JumpToCommentButton