diff --git a/themes/nav/components/MenuItemCollapse.js b/themes/nav/components/MenuItemCollapse.js
index 4f332337d59..065e92286fa 100755
--- a/themes/nav/components/MenuItemCollapse.js
+++ b/themes/nav/components/MenuItemCollapse.js
@@ -20,7 +20,9 @@ export const MenuItemCollapse = props => {
if (!link || !link.show) {
return null
}
-
+ // #号加标题 快速跳转到指定锚点
+ const isAnchor = link?.href === '#'
+ const url = isAnchor ? `#${link.name}` : link.href
const selected = router.pathname === link.href || router.asPath === link.href
const toggleShow = () => {
@@ -42,7 +44,7 @@ export const MenuItemCollapse = props => {
onClick={toggleShow}>
{!hasSubMenu && (
@@ -72,21 +74,24 @@ export const MenuItemCollapse = props => {
{hasSubMenu && (
{link?.subMenus?.map((sLink, index) => {
+ // #号加标题 快速跳转到指定锚点
+ const sIsAnchor = sLink?.href === '#'
+ const sUrl = sIsAnchor ? `#${sLink.name}` : sLink.href
+
return (
)
})}
diff --git a/themes/nav/components/TopNavBar.js b/themes/nav/components/TopNavBar.js
index cee758c6a2b..f9e9438b67a 100755
--- a/themes/nav/components/TopNavBar.js
+++ b/themes/nav/components/TopNavBar.js
@@ -1,10 +1,10 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
import Collapse from '@/components/Collapse'
-import { MenuBarMobile } from './MenuBarMobile'
-import throttle from 'lodash.throttle'
-import SearchInput from './SearchInput'
import DarkModeButton from '@/components/DarkModeButton'
+import throttle from 'lodash.throttle'
+import { useCallback, useEffect, useRef, useState } from 'react'
import LogoBar from './LogoBar'
+import { MenuBarMobile } from './MenuBarMobile'
+import SearchInput from './SearchInput'
/**
* 顶部导航栏 + 菜单
@@ -29,20 +29,22 @@ export default function TopNavBar(props) {
const throttleMs = 200
- const scrollTrigger = useCallback(throttle(() => {
- const scrollS = window.scrollY
- const nav = document.querySelector('#nav-bg')
- // const header = document.querySelector('#top-nav')
- const header = document.querySelector('#container-inner')
- const showNav = scrollS <= windowTop || scrollS < 5 || (scrollS <= header.clientHeight)// 非首页无大图时影藏顶部 滚动条置顶时隐藏
- if (!showNav) {
- nav && nav.classList.replace('-top-20', 'top-0')
- windowTop = scrollS
- } else {
- nav && nav.classList.replace('top-0', '-top-20')
- windowTop = scrollS
- }
- }, throttleMs)
+ const scrollTrigger = useCallback(
+ throttle(() => {
+ const scrollS = window.scrollY
+ const nav = document.querySelector('#nav-bg')
+ // const header = document.querySelector('#top-nav')
+ const header = document.querySelector('#container-inner')
+ const showNav =
+ scrollS <= windowTop || scrollS < 5 || scrollS <= header.clientHeight // 非首页无大图时影藏顶部 滚动条置顶时隐藏
+ if (!showNav) {
+ nav && nav.classList.replace('-top-20', 'top-0')
+ windowTop = scrollS
+ } else {
+ nav && nav.classList.replace('top-0', '-top-20')
+ windowTop = scrollS
+ }
+ }, throttleMs)
)
const toggleMenuOpen = () => {
@@ -50,42 +52,61 @@ export default function TopNavBar(props) {
}
return (
-
- {/* 图标Logo */}
-
-
-
+
+ {/* 图标Logo */}
+
+
+
- {/* 移动端折叠菜单 */}
-
-
- collapseRef.current?.updateCollapseHeight(param)} />
-
-
-
- {/* 导航栏菜单 */}
-
+ {/* 导航栏菜单 */}
+
+
+ {/* 搜索框、折叠按钮、仅移动端显示 */}
+
+
+
+
+
+
+ {isOpen ? (
+
+ ) : (
+
+ )}
+
+
-
- {/* 搜索框、折叠按钮、仅移动端显示 */}
-
-
-
-
-
-
- {isOpen ? : }
-
-
+ {/* 桌面端顶部菜单 */}
+
+ {/* {links && links?.map((link, index) => )} */}
+
+
+
+
+
- {/* 桌面端顶部菜单 */}
-
- {/* {links && links?.map((link, index) => )} */}
-
-
-
-
-
+ {/* 移动端折叠菜单 */}
+
+
+
+ collapseRef.current?.updateCollapseHeight(param)
+ }
+ />
+
+
)
}