2

Estoy haciendo una página con Vue, y necesito navegar en la misma página sin hacer scroll, se que vanilla se hace así:

<a href='#menu'>Menú</a>

<h2 id='menu'>Menú</h2>

pero con Vue no puedo acceder a los id de los demás componentes, igual estoy haciendo esa técnica desde un mismo componente y tampoco funciona.

Gracias.

2 respuestas 2

5

En este caso uso un boton pero podrias usar un link o cualquier otra cosa para hacer el scroll.

  1. colocar el id correspondiente a cada elemento seguido de botones o links para cada uno.
<button @click="scrollInto('element1')">Ir Elemento1</button>
...
...

<div id="element1"></div
<div id="element2"></div
<div id="element3"></div
  1. Esta funcion tomara el id del elemento, con esto buscara el DOM virtual de este elemento y usando la funcion scrollIntoView la pagina se movera hasta ese elemento, el behavior: 'smooth' es para que el movimiento sea suave.
scrollInto(elementId: string) {
    const section = this.$el.querySelector(`#${elementId}`);
    section!.scrollIntoView({ behavior: 'smooth' });
}

Ejemplo

new Vue({
  el: "#app",
  data: {},
  methods: {
    scrollInto(elementId) {
      const section = document.querySelector(`#${elementId}`);
      section.scrollIntoView({
        behavior: 'smooth'
      });
    }
  }
})
#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

#element1 {
  background-color: red;
}

#element2 {
  background-color: blue;
}

#element3 {
  background-color: green;
}

div {
  color: white;
  margin-top: 1rem;
  height: 400px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button @click="scrollInto('element1')">Elemento 1</button>
  <button @click="scrollInto('element2')">Elemento 2</button>
  <button @click="scrollInto('element3')">Elemento 3</button>
  <div id="element1">Hola</div>
  <div id="element2">Mundo</div>
  <div id="element3">Scroll</div>
</div>

0

Una solución con puro CSS, sin usar Javascript, es usar la propiedad CSS scroll-behavior con el valor smooth en el elemento contenedor (El que provoca el scroll), en el ejemplo lo he añadido al elemento html.

new Vue({
  el: '#app'
});

Vue.config.productionTip = false;
section {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-family: Impact;
  background-color: #ffbb00;
}


#section-2 {
  background-color: #00bbff;
}

.button-container {
  position: fixed;
  top: 0;
  left: 0;
  padding: 6px;
  width: 100%;
  display: flex;
  justify-content: space-evenly;
}

a {
  text-decoration: none;
}

html {
  scroll-behavior: smooth;
  padding: 0;
  margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="button-container">
    <button v-for="i in 3" :key="i">
      <a :href="`#section-${i}`">Section {{i}}</a>
    </button>
  </div>
  
  <section v-for="i in 3" :key="i" :id="`section-${i}`">Section {{i}}</section>
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.