How make smooth scrolling in nuxt.js and bootstrap site?

Question

I try make site with nuxt.js and this template. I copied folders: css, img, js, scss, vendor from template to static folder of my nuxt project. After this I maked nuxt.config.js and pages/index.vue files. All working good except smooth scrolling on page. I see error in browser console:

agency.min.js:7 Uncaught TypeError: Cannot read property 'top' of undefined
at a (agency.min.js:7)
at agency.min.js:7
at agency.min.js:7

How I can resolve this issue?

UPD: You can download this project to reproduce error

Answer 1

First, you need to overwrite the router default behavior like this. Paste this anywhere inside your nuxt.config.js:

   {
     //.......
      router: {
        scrollBehavior(to) {
          if (to.hash) {
            return window.scrollTo({
              top: document.querySelector(to.hash).offsetTop + window.innerHeight,
              behavior: 'smooth'
            })
          }
          return window.scrollTo({ top: 0, behavior: 'smooth' })
        }
      }
    }

Then your anchor link should be like this:

<nuxt-link :to="{ path: '/',hash:'#about'}">Contact</nuxt-link>