I am working on a Single-Page-Website using the Vue-Cli and i have a Navigation with some Links in. I have registered All my Components from the links in the Navigation-Component and i want to Scroll to the component when the link is clicked. I tried to use the scrollIntoView() method but it didn’t work. Can someone help me please?
here is my template:
<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>
and here is my 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>