theme-heo-nav-progress

components/HeroIcons.js

@@ -86,3 +86,9 @@ export const ArrowSmallRight = ({ className }) => {
     <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12h15m0 0l-6.75-6.75M19.5 12l-6.75 6.75" />
   </svg>
 }
+
+export const ArrowSmallUp = ({ className }) => {
+  return <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className={className}>
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75" />
+  </svg>
+}

themes/heo/components/MenuItemDrop.js

@@ -28,7 +28,7 @@ export const MenuItemDrop = ({ link }) => {
         </>}
 
         {/* 子菜单 */}
-        {hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-12' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-md bg-white transition-all duration-300 z-20 absolute block  `}>
+        {hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 top-14' : 'invisible opacity-0 top-20'} drop-shadow-md overflow-hidden rounded-xl bg-white transition-all duration-300 z-20 absolute`}>
             {link.subMenus.map((sLink, index) => {
               return <li key={index} className='cursor-pointer hover:bg-indigo-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-700  py-1 pr-6 pl-3'>
                     <Link href={sLink.to}>

themes/heo/components/NavBar.js

@@ -6,6 +6,7 @@ import throttle from 'lodash.throttle'
 import RandomPostButton from './RandomPostButton'
 import SearchButton from './SearchButton'
 import SlideOver from './SlideOver'
+import ReadingProgress from './ReadingProgress'
 /**
  * 顶部导航
  * @param {*} param0
@@ -75,6 +76,8 @@ const NavBar = props => {
                 <div className='flex justify-center items-center space-x-1'>
                     <RandomPostButton {...props} />
                     <SearchButton />
+                    <ReadingProgress/>
+
                     {/* 移动端菜单按钮 */}
                     <div onClick={toggleMenuOpen} className='flex lg:hidden w-8 justify-center items-center h-8 cursor-pointer'>
                         <i className='fas fa-bars' />

themes/heo/components/ReadingProgress.js

@@ -0,0 +1,42 @@
+import { ArrowSmallUp } from '@/components/HeroIcons'
+import { useEffect, useState } from 'react'
+
+/**
+ * 回顶按钮
+ * @returns
+ */
+export default function ReadingProgress() {
+  const [scrollPercentage, setScrollPercentage] = useState(0)
+  useEffect(() => {
+    let requestId
+
+    function handleScroll() {
+      const scrollHeight = document.documentElement.scrollHeight
+      const clientHeight = document.documentElement.clientHeight
+      const scrollY = window.scrollY || window.pageYOffset
+
+      const percent = Math.floor((scrollY / (scrollHeight - clientHeight)) * 100)
+      setScrollPercentage(percent)
+
+      requestId = requestAnimationFrame(handleScroll)
+    }
+
+    handleScroll() // 初始化滚动位置
+
+    return () => {
+      cancelAnimationFrame(requestId)
+    }
+  }, [])
+
+  return (<>
+        <div title={'阅读进度'}
+            onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+            className={`${scrollPercentage > 0 ? 'w-10 h-10 ' : 'w-0 h-0 opacity-0'} group cursor-pointer  hover:bg-black hover:bg-opacity-10 rounded-full flex justify-center items-center duration-200 transition-all`} >
+            <ArrowSmallUp className={'w-5 h-5 hidden group-hover:block'} />
+            <div className='group-hover:hidden text-xs flex justify-center items-center rounded-full w-6 h-6 bg-black text-white'>
+                {scrollPercentage < 100 ? scrollPercentage : <ArrowSmallUp className={'w-5 h-5 fill-white'} />}
+            </div>
+        </div>
+
+    </>)
+}