Question

我正在尝试实现一个菜单，其中菜单项滚动到部分ID。

如果我在页面上当前所在页面的某个部分上滚动，则效果很好。

为此，我安装了vue-scrollto。

问题在于，同一菜单也位于其他页面上，这意味着在这种情况下，它应该加载该部分所在的页面并滚动到该菜单。

为了给您一个想法，它是一个以前在jQuery中完成的网站，我正在Nuxt中重做。在jQuery中，我用以下方法解决了这个问题：

$('html,body').animate({  
  scrollTop: $(window.location.hash).offset().top -60
  }, 1000);

到目前为止，我最接近的是：

<li class="nav-item"><nuxt-link to="/" v-scroll-to="{ element: '#intro', duration: 1000, offset: -100  }" >Welcome</nuxt-link></li>

但是，例如，如果我在“关于”页面中，则首先加载主页，如果再次单击，则滚动到该部分。我该如何进行工作而不必两次单击菜单链接？

Answer 1

我在Nuxt中有一个类似的用例。我使用以下方法实现了（尽管我没有使用您提到的插件）：

〜/ app / router.scrollBehavior.js

export default async function (to, from, savedPosition) { 
  if (savedPosition) {
    return savedPosition
  }

  const findEl = (hash, x) => {
    return document.querySelector(hash) ||
      new Promise((resolve, reject) => {
        if (x > 50) {
          return resolve()
        }
        setTimeout(() => { resolve(findEl(hash, ++x || 1)) }, 100)
      })
  }

  if (to.hash) {
    const el = await findEl(to.hash)
    if ('scrollBehavior' in document.documentElement.style) {
      return window.scrollTo({ top: el.offsetTop, behavior: 'smooth' })
    } else {
      return window.scrollTo(0, el.offsetTop)
    }
  }

  return { x: 0, y: 0 }
}

您可以在此处找到更多information about configuring Nuxt router and its scroll behaviour。

Vue Nuxt滚动到其他页面

1 个答案: