vue 实现锚点滚动
vue 实现锚点滚动的方法
使用原生 scrollIntoView 方法
通过 document.getElementById 获取目标元素，调用 scrollIntoView 方法实现平滑滚动。代码示例如下：
scrollToAnchor(anchorId) {
const element = document.getElementById(anchorId);
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}使用 vue-router 的 hash 模式
在路由配置中启用 hash 模式，通过 router-link 或编程式导航实现锚点跳转。路由配置示例：
const router = new VueRouter({
mode: 'hash',
routes: [...]
});模板中使用方式：
<router-link to="#section1">跳转到章节1</router-link>结合 offset 调整滚动位置
当页面有固定头部时，需计算偏移量避免遮挡。通过 CSS 或 JavaScript 调整：
.target-anchor {
scroll-margin-top: 80px; /* 根据头部高度调整 */
}或通过 JavaScript 计算：
scrollWithOffset(el) {
const offset = 80;
const position = el.offsetTop - offset;
window.scrollTo({ top: position, behavior: 'smooth' });
}使用第三方库
安装 vue-scrollto 库实现更复杂的效果：
npm install vue-scrollto在 Vue 中使用：
import VueScrollTo from 'vue-scrollto';
Vue.use(VueScrollTo);
// 模板中调用
<button v-scroll-to="'#section2'">滚动到第二节</button>监听路由变化实现自动滚动
在组件的 mounted 钩子中监听 hash 变化并触发滚动：
mounted() {
if (this.$route.hash) {
setTimeout(() => {
this.scrollToAnchor(this.$route.hash.slice(1));
}, 100);
}
}注意事项
- 确保目标元素已在 DOM 中渲染完成后再执行滚动
- 移动端需考虑浏览器兼容性问题
- 对于动态加载内容，需在数据加载完成后执行滚动
- 可添加过渡动画增强用户体验
