diff --git a/components/JumpToBottomButton.js b/components/JumpToBottomButton.js
index a72976a9..e059ba68 100644
--- a/components/JumpToBottomButton.js
+++ b/components/JumpToBottomButton.js
@@ -13,16 +13,17 @@ import smoothscroll from 'smoothscroll-polyfill'
  * @returns {JSX.Element}
  * @constructor
  */
-const JumpToBottomButton = ({ targetRef, showPercent = false }) => {
+const JumpToBottomButton = ({ showPercent = false }) => {
   if (!BLOG.widget?.showToBottom) {
     return <></>
   }
+
+  const targetRef = typeof window !== 'undefined' ? document.getElementById('wrapper') : undefined
   const { locale } = useGlobal()
   const [show, switchShow] = useState(false)
   const [percent, changePercent] = useState(0)
   const scrollListener = () => {
-    // 处理是否显示回到顶部按钮
-    const clientHeight = targetRef ? (targetRef.current ? targetRef.current.clientHeight : 0) : 0
+    const clientHeight = targetRef?.clientHeight
     const scrollY = window.pageYOffset
     const fullHeight = clientHeight - window.outerHeight
     let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
@@ -33,6 +34,11 @@ const JumpToBottomButton = ({ targetRef, showPercent = false }) => {
     }
     changePercent(per)
   }
+
+  function scrollToBottom () {
+    window.scrollTo({ top: targetRef.clientHeight, behavior: 'smooth' })
+  }
+
   useEffect(() => {
     smoothscroll.polyfill()
 
@@ -40,8 +46,8 @@ const JumpToBottomButton = ({ targetRef, showPercent = false }) => {
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
 
-  return (<div id='jump-to-top' className='right-1 fixed flex bottom-36  z-20'>
-      <div onClick={() => window.scrollTo({ top: targetRef.current.clientHeight, behavior: 'smooth' })}
+  return (<div id='jump-to-top' className='right-1 fixed flex bottom-36 z-20'>
+      <div onClick={() => scrollToBottom()}
         className={(show ? '' : 'hidden') + ' animate__fadeInRight duration-500 animate__animated animate__faster glassmorphism flex justify-center items-center w-8 h-8 cursor-pointer '}>
         <div className='dark:text-gray-200 transform hover:scale-150 text-xs duration-200' title={locale.POST.TOP} >
           <FontAwesomeIcon icon={faArrowDown} />
diff --git a/components/JumpToTopButton.js b/components/JumpToTopButton.js
index 7512d93f..b4abc11e 100644
--- a/components/JumpToTopButton.js
+++ b/components/JumpToTopButton.js
@@ -13,21 +13,21 @@ import BLOG from '@/blog.config'
  * @returns {JSX.Element}
  * @constructor
  */
-const JumpToTopButton = ({ targetRef, showPercent = false }) => {
+const JumpToTopButton = ({ showPercent = false }) => {
   if (!BLOG.widget?.showToTop) {
     return <></>
   }
   const { locale } = useGlobal()
   const [show, switchShow] = useState(false)
   const [percent, changePercent] = useState(0)
+  const targetRef = typeof window !== 'undefined' ? document.getElementById('wrapper') : undefined
   const scrollListener = () => {
     // 处理是否显示回到顶部按钮
-    const clientHeight = targetRef ? (targetRef.current ? targetRef.current.clientHeight : 0) : 0
+    const clientHeight = targetRef?.clientHeight
     const scrollY = window.pageYOffset
     const fullHeight = clientHeight - window.outerHeight
     let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
     if (per > 100) per = 100
-    // const shouldShow = scrollY > 100 && per > 0 && scrollY < windowTop
     const shouldShow = scrollY > 100 && per > 0
 
     if (shouldShow !== show) {
diff --git a/layouts/BaseLayout.js b/layouts/BaseLayout.js
index 3a195739..c463e8fc 100644
--- a/layouts/BaseLayout.js
+++ b/layouts/BaseLayout.js
@@ -69,8 +69,8 @@ const BaseLayout = ({
       </main>
 
       <Footer title={meta.title}/>
-      <JumpToTopButton targetRef={targetRef} showPercent={false} />
-      <JumpToBottomButton targetRef={targetRef} showPercent={false}/>
+      <JumpToTopButton showPercent={false} />
+      <JumpToBottomButton showPercent={false}/>
       <FloatDarkModeButton/>
       </>
   )