滚动消抖，回顶按钮加数字，其他微调

components/Container.js

@@ -1,28 +1,32 @@
 import PropTypes from 'prop-types'
-import React, { useEffect } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import CommonHead from '@/components/CommonHead'
 import TopNav from '@/components/TopNav'
+import throttle from 'lodash.throttle'
 
 const Container = ({ children, layout, fullWidth, tags, meta, ...customMeta }) => {
   let windowTop = 0
+  const scrollTrigger = useCallback(throttle(() => {
+    const scrollS = window.scrollY
+    const nav = document.querySelector('#sticky-nav')
+    const tagsBar = document.querySelector('#tags-bar')
+    if (scrollS >= windowTop && scrollS > 10) {
+      nav && nav.classList.add('-mt-16')
+      tagsBar && tagsBar.classList.add('-mt-32')
+      windowTop = scrollS
+    } else {
+      nav && nav.classList.remove('-mt-16')
+      tagsBar && tagsBar.classList.remove('-mt-32')
+      windowTop = scrollS
+    }
+  }, 200))
+
   // 监听滚动
   useEffect(() => {
-    function scrollTrigger () {
-      const scrollS = window.scrollY
-      const nav = document.querySelector('#sticky-nav')
-      const tagsBar = document.querySelector('#tags-bar')
-      if (scrollS >= windowTop) {
-        nav && nav.classList.add('-mt-16')
-        tagsBar && tagsBar.classList.add('-mt-32')
-        windowTop = scrollS
-      } else {
-        nav && nav.classList.remove('-mt-16')
-        tagsBar && tagsBar.classList.remove('-mt-32')
-        windowTop = scrollS
-      }
-    }
-
     window.addEventListener('scroll', scrollTrigger)
+    return () => {
+      window.removeEventListener('scroll', scrollTrigger)
+    }
   })
   return (
     <>

components/JumpToTop.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import throttle from 'lodash.throttle'
 import { useLocale } from '@/lib/locale'
 
@@ -8,29 +8,38 @@ import { useLocale } from '@/lib/locale'
  * @returns {JSX.Element}
  * @constructor
  */
-const JumpToTop = () => {
+const JumpToTop = ({ targetRef }) => {
   const locale = useLocale()
-
   const [show, switchShow] = useState(false)
+  const [percent, changePercent] = useState(0)
+  const scrollListener = useCallback(throttle(() => {
+    // 处理是否显示回到顶部按钮
+    const scrollY = window.pageYOffset
+    const fullHeight = targetRef.current.clientHeight - window.outerHeight
+    const shouldShow = scrollY > 100
+    if (shouldShow !== show) {
+      switchShow(shouldShow)
+    }
+    let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
+    if (per > 100) per = 100
+    changePercent(per)
+  }, 100))
   useEffect(() => {
-    const scrollListener = throttle(() => {
-      // 处理是否显示回到顶部按钮
-      const shouldShow = window.scrollY > 100
-      if (shouldShow !== show) {
-        switchShow(shouldShow)
-      }
-    }, 500)
     document.addEventListener('scroll', scrollListener)
     return () => document.removeEventListener('scroll', scrollListener)
   }, [show])
 
   return (
     <div
-      className={(show ? 'animate__fadeInUp' : 'animate__fadeOutUp') + ' animate__animated animate__faster'}>
+      className={(show ? 'animate__fade InUp' : 'animate__fadeOutUp') + ' animate__animated animate__faster'}>
       <div
         className='border dark:border-gray-500 dark:bg-gray-600 bg-white cursor-pointer hover:shadow-2xl'
         onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
-        <a className='dark:text-gray-200 fa fa-arrow-up p-4 transform hover:scale-150 duration-200' title={locale.POST.TOP}/>
+        <div className='absolute bg-white z-20 hover:opacity-0 w-11 py-2.5 text-center'>
+            {percent}%
+        </div>
+        <a className='dark:text-gray-200 fa fa-arrow-up p-4 transform hover:scale-150 duration-200'
+           title={locale.POST.TOP} />
       </div>
     </div>
 

components/MenuButtonGroup.js

@@ -17,25 +17,24 @@ const MenuButtonGroup = ({ allowCollapse = false }) => {
     { id: 9, icon: 'fa-telegram', name: 'Telegram', to: 'https://t.me/tangly_1024', show: true }
   ]
   return <nav id='nav'>
-    <ul className='leading-8 text-gray-700 dark:text-gray-400'>
+    <div className='leading-8 text-gray-700 dark:text-gray-400'>
       {links.map(
         link =>
           link.show && (
-            <Link href={link.to}>
-              <li
-                key={link.id + link.icon}
-                title={link.to}
-                className='py-3 px-5 hover:bg-gray-100 cursor-pointer dark:hover:bg-black duration-100 flex flex-nowrap align-middle'
-              >
+            <a
+              key={link.id + link.icon}
+              title={link.to}
+              href={link.to}
+              className='py-3 px-5 hover:bg-gray-100 cursor-pointer dark:hover:bg-black duration-100 flex flex-nowrap align-middle'
+            >
                 <div className='my-auto w-5 text-2xl justify-center flex'>
                   <i className={'fa ' + link.icon} />
                 </div>
                 <div className={(allowCollapse ? 'hidden xl:block' : '') + ' ml-4 w-32'}>{link.name}</div>
-              </li>
-            </Link>
+            </a>
           )
       )}
-    </ul>
+    </div>
   </nav>
 }
 export default MenuButtonGroup

components/Progress.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import throttle from 'lodash.throttle'
 
 /**
@@ -8,15 +8,17 @@ import throttle from 'lodash.throttle'
  */
 const Progress = ({ targetRef }) => {
   const [percent, changePercent] = useState(0)
+  const scrollListener = useCallback(throttle(() => {
+    if (targetRef.current) {
+      const scrollY = window.pageYOffset
+      const fullHeight = targetRef.current.clientHeight - window.outerHeight
+      let per = parseFloat(((scrollY / fullHeight * 100)).toFixed(0))
+      if (per > 100) per = 100
+      changePercent(per)
+    }
+  }, 100))
+
   useEffect(() => {
-    const scrollListener = throttle(() => {
-      if (targetRef.current) {
-        const fullHeight = targetRef.current.clientHeight
-        const per = parseFloat(((window.scrollY / (fullHeight - 100) * 100)).toFixed(0))
-        changePercent(per)
-      }
-      // console.log('滚动信息', window.scrollY, fullHeight, per)
-    }, 1)
     document.addEventListener('scroll', scrollListener)
     return () => document.removeEventListener('scroll', scrollListener)
   }, [percent])

components/RightAside.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useRef, useState } from 'react'
 import TocBar from '@/components/TocBar'
 import throttle from 'lodash.throttle'
 import ShareButton from '@/components/ShareButton'
@@ -30,8 +30,8 @@ const RightAside = ({ toc, post }) => {
     }
   }, 500)
   const [hideAside, changeHideAside] = useState(true)
-
-  return <aside className='dark:bg-gray-800'>
+  const targetRef = useRef()
+  return <aside className='dark:bg-gray-800' ref={targetRef}>
     {/* 上方菜单组 */}
     <div
       className={(hideAside ? 'right-0' : 'right-48') + ' z-20 space-x-2 fixed flex top-0 px-3 py-1 duration-500'}>
@@ -50,7 +50,7 @@ const RightAside = ({ toc, post }) => {
         {/* 分享按钮 */}
         <ShareButton post={post} />
         {/* 跳回顶部 */}
-        <JumpToTop />
+        <JumpToTop targetRef={targetRef} />
       </div>
     </div>
 

components/TocBar.js

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback } from 'react'
 import throttle from 'lodash.throttle'
 import { uuidToId } from 'notion-utils'
 import { cs } from 'react-notion-x'
@@ -25,7 +25,7 @@ const TocBar = ({ toc }) => {
   // 同步选中目录事件
   const [activeSection, setActiveSection] = React.useState(null)
   const throttleMs = 100
-  const actionSectionScrollSpy = throttle(() => {
+  const actionSectionScrollSpy = useCallback(throttle(() => {
     const sections = document.getElementsByClassName('notion-h')
     let prevBBox = null
     let currentSectionId = activeSection
@@ -48,7 +48,7 @@ const TocBar = ({ toc }) => {
       break
     }
     setActiveSection(currentSectionId)
-  }, throttleMs)
+  }, throttleMs))
 
   return <div className='bg-white dark:bg-gray-800 pb-10 min-h-screen'>
     <div className='w-52 border-t dark:border-gray-600 border-b text-2xl bg-gray-100 font-bold text-black dark:bg-black dark:text-white py-6 px-6'>