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 (
- -
) + + ) } export default JumpToCommentButton