title: Nuxt js scroll to section via hash is covered by the fixed navbar
body: <p>I'm currently using Nuxt js + Vuetify and can't find a way or any documentation for adding a scroll padding in the router.scrollBehavior.js file in the .nuxt folder.</p>
  <p>I have tried to import and use the Vuetify goTo() (which automatically accounts for the fixed navbar) in the router.scrollBehavior.js but it gives a &quot;Cannot use import statement outside a module&quot; uncaught syntax error.</p>
  <p>The link</p>
  <pre><code>    &lt;NuxtLink
       :to=&quot;{ path: '/about', hash: '#five-principles-intro' }&quot;
       class=&quot;text-no-wrap&quot;
       &gt;Our Principles&lt;/NuxtLink&gt;
  </code></pre>
  <p>default router.scrollBehvaior.js</p>
  <pre><code>
      import { getMatchedComponents, setScrollRestoration } from './utils'
  
  if (process.client) {
    if ('scrollRestoration' in window.history) {
      setScrollRestoration('manual')
  
      // reset scrollRestoration to auto when leaving page, allowing page reload
      // and back-navigation from other pages to use the browser to restore the
      // scrolling position.
      window.addEventListener('beforeunload', () =&gt; {
        setScrollRestoration('auto')
      })
  
      // Setting scrollRestoration to manual again when returning to this page.
      window.addEventListener('load', () =&gt; {
        setScrollRestoration('manual')
      })
    }
  }
  
  function shouldScrollToTop(route) {
    const Pages = getMatchedComponents(route)
    if (Pages.length === 1) {
      const { options = {} } = Pages[0]
      return options.scrollToTop !== false
    }
    return Pages.some(({ options }) =&gt; options &amp;&amp; options.scrollToTop)
  }
  
  export default function (to, from, savedPosition) {
    // If the returned position is falsy or an empty object, will retain current scroll position
    let position = false
    const isRouteChanged = to !== from
  
    // savedPosition is only available for popstate navigations (back button)
    if (savedPosition) {
      position = savedPosition
    } else if (isRouteChanged &amp;&amp; shouldScrollToTop(to)) {
      position = { x: 0, y: 0 }
    }
  
    const nuxt = window.$nuxt
  
    if (
      // Initial load (vuejs/vue-router#3199)
      !isRouteChanged ||
      // Route hash changes
      (to.path === from.path &amp;&amp; to.hash !== from.hash)
    ) {
      nuxt.$nextTick(() =&gt; nuxt.$emit('triggerScroll'))
    }
  
    return new Promise((resolve) =&gt; {
      // wait for the out transition to complete (if necessary)
      nuxt.$once('triggerScroll', () =&gt; {
        // coords will be used if no selector is provided,
        // or if the selector didn't match any element.
        if (to.hash) {
          let hash = to.hash
          return window.scrollTo({})
          // // CSS.escape() is not supported with IE and Edge.
          // if (
          //   typeof window.CSS !== 'undefined' &amp;&amp;
          //   typeof window.CSS.escape !== 'undefined'
          // ) {
          //   hash = '#' + window.CSS.escape(hash.substr(1))
          // }
          // try {
          //   if (document.querySelector(hash)) {
          //     // scroll to anchor by returning the selector
          //     position = { selector: hash, top: 100 }
          //   }
          // } catch (e) {
          //   console.warn(
          //     'Failed to save scroll position. Please add CSS.escape() polyfill (https://github.com/mathiasbynens/CSS.escape).'
          //   )
          // }
        }
        resolve(position)
      })
    })
  }
  </code></pre>
  <p>Any suggestions are appreciated.</p>