En este caso uso un boton pero podrias usar un link o cualquier otra cosa para hacer el scroll.
- 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
- 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, elbehavior: 'smooth'
es para que el movimiento sea suave.
scrollInto(elementId: string) {
const section = this.$el.querySelector(`#${elementId}`);
section!.scrollIntoView({ behavior: 'smooth' });
}
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>