The Be Sure Blog

To add smooth scrolling to a website, just a few steps are needed:

$ npm install --save vue3-smooth-scroll

In main.ts, add:

import VueSmoothScroll from 'vue3-smooth-scroll'

and add ".use(VueSmoothScroll)", like here:

createApp(App).use(VueSmoothScroll).mount('#app')

Now add "v-smooth-scroll" to each <a> tag that should have smooth scrolling. The navigation may look like this now:

<nav>
  <a href="#top" v-on:click="toggleNav" v-smooth-scroll>Top</a>
  <a href="#about" v-on:click="toggleNav" v-smooth-scroll>About</a>
  <a href="#services" v-on:click="toggleNav" v-smooth-scroll>Services</a>
  <a href="#skills" v-on:click="toggleNav" v-smooth-scroll> Skills</a>
  <a href="#references" v-on:click="toggleNav" v-smooth-scroll>References</a>
  <a href="#contact" v-on:click="toggleNav" v-smooth-scroll>Contact</a>
</nav>

And that's all! Just restart the local development server and make sure the sections have the correct id, like:

<div className="about" id="about"></div>