Skip to main content

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' });
}

Aqui un ejemploEjemplo

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>

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' });
}

Aqui un ejemplo

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>

se añadieron 84 caracteres en el cuerpo
Origen Enlace

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' });
}

Aqui un ejemplo

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' });
}

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' });
}

Aqui un ejemplo

Origen Enlace

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' });
}