es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo hacer scroll hasta un componente en Vue.js

26 Jul, 2023 Programación

Estoy trabajando en un sitio web de una sola página utilizando Vue-Cli y tengo una navegación con algunos enlaces.

He registrado todos mis componentes de los enlaces en el componente de navegación y quiero desplazarme hasta el componente cuando se haga clic en el enlace.

Intenté usar el método scrollIntoView(), pero no funcionó. ¿Alguien me puede ayudar por favor?

Aquí está mi plantilla:

<div class="right-nav">
  <div><a href="#" @click="scrollToComponent(el)">Infrastrukturen</a></div>
  <div><a href="#">Gartenbau</a></div>
  <div><a href="#">Karriere</a></div>
  <div><a href="#">Kontakt</a></div>
  <div><a href="#">Impressum</a></div>
</div>

Aquí está mi script:

<script>
import Kontakt from './kontakt.vue'
import Karriere from './karriere.vue'
import Gartenbau from './gartenbau.vue'
import Breitband from './breitband.vue'
import About from './about.vue'

export default {
  name: 'Navigation',
  components: {
      Kontakt,
      Karriere,
      Gartenbau,
      Breitband,
      About,
  },
    data:() => {
        return {
            defaultComp: 'About',
    }
  },
  methods:{
      scrollToComponent(el){
        const comp = el;
        if(comp){
            comp.scrollIntoView({
                behavior:"smooth"
            })
        }
    }
 }
}
</script>
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para desplazarse correctamente al componente deseado cuando se hace clic en el enlace, se deben hacer algunos ajustes tanto en la plantilla como en el script.

    Primero, en la plantilla, el atributo href de las etiquetas <a> debe establecerse en # + el nombre del componente al que se desea desplazarse. Por ejemplo: <a href="#Kontakt" @click="scrollToComponent(Kontakt)">Kontakt</a>

    Luego, en el script, el método scrollToComponent debe tomar el nombre del componente como parámetro, no el elemento completo. También debe usar this.$refs para obtener una referencia al componente deseado, y solo llamar a scrollIntoView si esa referencia existe.

    <template>
  <div class="right-nav">
    <div><a href="#About" @click="scrollToComponent('About')">About</a></div>
    <div><a href="#Kontakt" @click="scrollToComponent('Kontakt')">Kontakt</a></div>
    <div><a href="#Karriere"  @click="scrollToComponent('Karriere')">Karriere</a></div>
    <div><a href="#Gartenbau" @click="scrollToComponent('Gartenbau')">Gartenbau</a></div>
    <div><a href="#Breitband"  @click="scrollToComponent('Breitband')">Breitband</a></div>
  </div>
</template>

<script>
import Kontakt from './kontakt.vue'
import Karriere from './karriere.vue'
import Gartenbau from './gartenbau.vue'
import Breitband from './breitband.vue'
import About from './about.vue'

export default {
  name: 'Navigation',
  components: {
      Kontakt,
      Karriere,
      Gartenbau,
      Breitband,
      About,
  },
  methods:{
    scrollToComponent(componentName){
      const comp = this.$refs[componentName];
      if(comp){
          comp.$el.scrollIntoView({
              behavior: "smooth"
          })
      }
    }
  }
}
</script>

    Con estos cambios, al hacer clic en un enlace se desplazará suavemente al componente deseado.

Comments are closed.