锚点的另类实现方法

为什么不用锚点

• 锚点会改变 url 地址，将锚点的值添加到 url 后面
  • vue 路由的情况下回退需要多次
  • 刷新页面时会找不到页面
• 滑动特别生硬，没有过度效果

解决 URL 问题

<!-- a标签添加方法，参数为对应锚点的id  -->
<a @click="clickanchor('#item0')"></a>
<!-- 组册锚点  -->
<div id="item0"></div>

clickanchor(idName) {
   document.querySelector(idName).scrollIntoView(true);
}

• querySelector用于选择元素，具体可看文档HTML DOM querySelector()方法
• element.scrollIntoView()方法让当前的元素滚动到浏览器窗口的可视区域内

解决过度问题

• 介绍CSS的新属性behavior: "smooth" 用于平滑滚动

clickanchor(idName) {
     document.querySelector(idName).scrollIntoView({ behavior: "smooth" });
}