html 跳转到页面指定位置

创建目标组件并添加目标元素
假设我们想在 About.vue 组件中滚动到某个特定的位置。我们可以在 About.vue 中添加一个具有唯一 id属性的元素

    <div id="service" class="service">
      <div class="service-text" >
        <div class="service-text1">24H在线</div>
        <div class="service-text2">真人客服，永不失联</div>
        <div class="service-text3">我们的真人客服7x24小时在线，随时响应您的需求。无论问题大小，迅速解决，确保您的使用体验无忧，永不失联。</div>
      </div>
    </div>

添加滚动到指定位置的代码

<script>
export default {
  methods: {
    scrollToElement(refID) {
      let time=setTimeout(()=>{
          this.$nextTick(()=>{
            let top=0;
            let targetElement=document.getElementById(refID);
            if(targetElement){
            // 获取元素距离顶部的距离
              top=targetElement.offsetTop;
            }
            if(top>0){
            // 滚动到指定位置
              window.scrollTo({
                top: top,
                behavior: 'smooth'
              });
            }
            clearTimeout(time);
            time=null;
          })
        },300);
    },
  }
}

</script>

最后，在你的 Home.vue 或其他组件中触发路由导航：

<li><a href="javascript:void(0)" @click="scrollToElement('service')">联系我们</a></li>