那个网站有用到锚点定位

### Vue3 锚点定位网站示例 以下是几个常见的基于 Vue3 实现锚点定位的网站示例及其技术细节： #### 1. 官方文档风格的目录导航 许多官方文档站点（如 Element Plus 或 Ant Design Vue）都实现了点击左侧目录可以平滑滚动到右侧内容对应的章节。这种设计通常结合 `vue-router` 和自定义指令完成。 ```javascript // main.js 中配置全局指令用于平滑滚动 import { createApp } from 'vue'; const app = createApp(App); app.directive('scroll-to', { mounted(el, binding) { el.addEventListener('click', () => { const targetId = binding.value; const element = document.getElementById(targetId); if (element) { element.scrollIntoView({ behavior: 'smooth' }); } }); }, }); ``` 在模板中使用该指令： ```html <a v-scroll-to="'section1'">Go to Section 1</a> <div id="section1">Section Content</div> ``` 此方式利用了原生 DOM API 并封装成可重用的组件或指令[^1]。 --- #### 2. 单页应用中的锚点跳转 单页应用（SPA）常通过 Vue Router 来管理路由状态，同时支持锚点跳转和平滑滚动。以下是一个简单的实现案例： ```html <template> <div> <nav> <router-link :to="{ hash: '#about' }">About</router-link> | <router-link :to="{ hash: '#contact' }">Contact</router-link> </nav> <main> <section id="about"> <h2>About Us</h2> <!-- 关于我们 --> </section> <section id="contact"> <h2>Contact Info</h2> <!-- 联系信息 --> </section> </main> </div> </template> <script setup> import { onBeforeRouteUpdate, useRouter } from 'vue-router'; const router = useRouter(); onBeforeRouteUpdate((to) => { if (to.hash) { setTimeout(() => { const element = document.querySelector(to.hash); if (element) { element.scrollIntoView({ behavior: 'smooth' }); } }, 0); } }); </script> ``` 这段代码展示了如何结合 Vue Router 的钩子函数来处理锚点跳转，并确保页面加载完成后执行平滑滚动操作[^1]。 --- #### 3. 双向联动的锚点菜单 某些官网会提供一种双向联动的效果——当用户滚动页面时，侧边栏的菜单项会被自动激活；而点击菜单项则会让页面滚动到对应部分。下面是一段简化版的实现逻辑： ```html <template> <aside> <ul> <li v-for="(item, index) in sections" :key="index" @click="jumpTo(item.id)" :class="{ active: current === item.id }"> {{ item.title }} </li> </ul> </aside> <main ref="content"> <section v-for="(item, index) in sections" :id="item.id" :key="index"> <h2>{{ item.title }}</h2> <p>{{ item.content }}</p> </section> </main> </template> <script setup> import { ref, watchEffect } from 'vue'; const content = ref(null); const sections = [ { id: 'intro', title: 'Introduction', content: '...' }, { id: 'features', title: 'Features', content: '...' }, ]; const current = ref(''); function jumpTo(id) { const section = document.getElementById(id); if (section) { section.scrollIntoView({ behavior: 'smooth' }); current.value = id; } } watchEffect(() => { if (!content.value) return; const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting && entry.target.id) { current.value = entry.target.id; } }); }, { threshold: 0.5 } ); Array.from(content.value.children).forEach((child) => { if (child.tagName.toLowerCase() === 'section') { observer.observe(child); } }); }); </script> ``` 这里借助 `IntersectionObserver` API 监听各节内容是否进入视口范围，进而更新当前活动菜单的状态[^3]。 --- #### 4. 带有动画效果的锚点切换 为了提升用户体验，还可以引入第三方库（如 GSAP 或 ScrollMagic），为锚点跳转增加更复杂的动画效果。例如： ```javascript import gsap from 'gsap'; export default { methods: { scrollToElement(elementId) { const element = document.getElementById(elementId); if (element) { gsap.to(window, { duration: 1, scrollTo: { y: element.offsetTop, autoKill: true } }); } }, }, }; ``` 调用时只需传递目标元素 ID 给 `scrollToElement()` 函数即可触发带有缓动曲线的滚动行为[^2]。 --- ### 总结 以上列举了几类典型的 Vue3 锚点定位应用场景及其实现思路，涵盖了基础功能扩展至高级交互体验的设计模式。每种方案各有侧重，可根据实际业务需求灵活选用。