I'm curious about the scripts you're using to make this work. It seems like bootstrap is involved, but have you considered switching to bootstrap vue for better compatibility? If not, here are some suggestions to enhance the functionality without changing frameworks.
Currently, you're utilizing anchor tags with IDs like this:
<a href="#my-div">content</a>
Typically, clicking on these links in browsers scrolls to the corresponding div. To prevent this behavior, it's advisable to add `preventDefault()` to all click events on anchor tags. You can achieve this through Vue by implementing the following methods:
<a href="#my-div" @click.prevent>content</a> // automatically prevents click event
// or
<a href="#my-div" @click="myFunction">content</a>
// or if you want custom functions while preventing default actions
<a href="#my-div" @click.prevent="otherFunction">content</a> // automatically prevents click event
<script>
export default {
...other stuff
methods: {
myFunction(e) {
e.preventDefault();
}
}
}
</script>
Although it's possible to manually prevent these events without Vue, I recommend sticking to Vue's own `@click` event handler for consistency and ease of maintenance. However, if needed, you can manually prevent these events in the mounted hook as shown below:
<script>
export default {
...,
mounted() {
const parent = document.getElementById("id-of-parent-div-that-has-all-anchor-tags") //this is done so you don't mess up anchor tags outside this div
parent.querySelectorAll("a").forEach((anchor) => {
anchor.onclick= (e) => e.preventDefault();
})
}
}
</script>