vueh5锚点定位a标签实现图片导航功能

# 文字布局的锚点定位实现文字导航功能

点击自动根据布局的id滚动到这个位置 非常优雅 锚点定位a标签来实现页面内的导航功能。本文将介绍如何使用Vue.js的锚点定位a标签实现图片导航。

在这边将锚点链接嵌套在一个图片标签(cl-image === van-image)中，以实现图片导航功能，我们可以使用HTML的a标签来创建锚点 将锚点链接指向我们想要导航到的目标元素，带有id属性的目标元素
<cl-sticky>
  <div class="nav_scroll">
    <a href="javascript:void(0)" class="_scroll" @click="changeTab('#xhuaed1', '/img/uaed/act1.png', '/img/uaed/act1.png')">
      <cl-image :src="image === '/img/uaed/act1.png' ? '/img/uaed/act1.png' : '/img/uaed/act2.png'" alt=""/>
    </a>
    <a href="javascript:void(0)" class="_scroll" @click="changeTab('#xhuaed2', '/img/uaed/venue2.png', '/img/uaed/venue1.png')">
      <cl-image :src="image === '/img/uaed/venue1.png' ? '/img/uaed/venue1.png' : '/img/uaed/venue2.png'" alt=""/>
    </a>
    <a href="javascript:void(0)" class="_scroll" @click="changeTab('#xhuaed3', '/img/uaed/info2.png', '/img/uaed/info1.png')">
      <cl-image :src="image === '/img/uaed/info1.png' ? '/img/uaed/info1.png' : '/img/uaed/info2.png'" alt=""/>
    </a>
  </div>
</cl-sticky>

使用JavaScript来捕获锚点链接的点击事件，并通过滚动动画将页面滚动到指定的位置
   // 点击tab拦标题滑动
 changeTab(selector, src, altSrc) {
  this.image = altSrc || src;
  this.$nextTick(() => {
    const element = document.querySelector(selector);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
    }
  });
},

data() {
return {
  image: '/img/uaed/act1.png',
}
},