javascript - 如何在 nuxt.js 和引导站点中平滑滚动？

Question

我尝试使用 nuxt.js 和 this template 创建网站.我将文件夹:css、img、js、scss、vendor 从模板复制到我的 nuxt 项目的静态文件夹。在这之后我做了nuxt.config.js和 pages/index.vue文件。除了页面上的平滑滚动外，所有工作都很好。我在浏览器控制台中看到错误:

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

我该如何解决这个问题？

UPD:您可以 download这个项目重现错误

Answer 1

首先，您需要像这样覆盖路由器的默认行为。将此粘贴到 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' })
        }
      }
    }

那么你的 anchor 链接应该是这样的:

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