在导航和组件 Vue 之间滚动答案

【问题标题】：scroll between Nav and components Vue在导航和组件 Vue 之间滚动
【发布时间】：2020-02-20 01:21:46
【问题描述】：

我这样创建了一个vue单页：

我的 app.vue

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div id="app">

    <Navegacion/>
    <Cabecera/>
    <Contenido/>
    <Aside/>
    <Footer/>
   
  </div>
</template>

我的导航.vue

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<template>

    <div class="flex flex-row blanco">
        <div class="item-uno">
            <nav class="flex flex-row items-center">

                <a @click="desplazar" href="#">Quienes somos</a>
                <a @click="desplazar" href="#">Cómo funciona</a>
                <a @click="desplazar" href="#">Servicios a empresas</a>
                <a @click="desplazar" href="#">Compromiso</a>

            </nav>

        </div>

        <div class="item-dos flex justify-center">

            <img id="logo" src="../assets/logo.svg" alt="logo apeteat">

        </div>

        <div class="item-uno flex justify-center items-center">

            <a class="btn blue">Nuevo pedido</a>
            <div class="flex flex-row items-center">
               <i class="fas fa-shopping-bag"></i>
               <p>0,00 €</p>
            </div>
        </div>

    </div>
    
</template>
  <script>
  export default {
name: 'Navegacion',
props: {
},
methods: {

  desplazar: function() {
   window.scrollTo(0,200);
    }
  }
}

  </script>

我想在点击导航链接时滚动到对应的组件。

我已经安装了 npm scroll-to，并且我尝试添加一个函数 methd desplazar 但它不起作用。

提前感谢您的帮助。

【问题讨论】：

stackoverflow.com/a/66143590/9524228你可以查看这个回复

标签： vue.js

【解决方案1】：

window.scrollTo()是javascript窗口方法，你不需要安装任何东西来使用它。

它在您的代码中有效，但href="#" 总是将您放在页面顶部，因此它取消了 window.scrollTo()。您需要从链接中删除 href="#"。

要首先滚动到组件，您需要像这样向它添加 ref：

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
  <div id="app">

    <Navegacion ref="Navegacion" />
    <Cabecera ref="Cabecera" />
    <Contenido ref="Contenido" />
    <Aside ref="Aside" />
    <Footer ref="Footer" />
   
  </div>
</template>

你的函数应该是这样的

scrollToNavegacion() {
   window.scrollTo(0, this.$refs.Navegacion.$el.offsetTop);
}

【讨论】：