web-dev-qa-db-ja.com

nuxtの問題-ハッシュ/アンカーのあるページへのナビゲーションをリンクします

私は自分のウェブサイトのナビゲーションでnuxt-linksを使用しています。それらのほとんどは、次のようなホームページのハッシュ要素/アンカーを指しています。

<nuxt-link
  v-else
  class="text-link"
  :to="localePath('index') + #hash"
>

現在ホームページにある場合でも、別のサイトに移動した場合などに機能します。/aboutとnavbarnuxt-linkをクリックします（/ aboutから/＃hashまたは/ any-other-site＃hashに移動したいので）コンソールをチェックするためにnuxtエラーが表示されました。 nullのプロパティ 'offsetTop'」。

Nuxt.configのルーター構成（これがないと、要素と同じサイトにあるアンカーされた要素までスクロールすることさえできません！）：

  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' });
      }
  },

：to属性で 'hash' '＃hash'を試しましたが、何も機能しません。誰かがこれを手伝ってくれませんか？別のページ+＃anchorに移動するにはどうすればよいですか（そのアンカーまでスクロールするには？）

javascriptvue.jsvue-routernuxt.jsnuxt
4
shikinen

この方法をgetBoundingClientRect（）。top + window.scrollYで使用すると、サブセクションの場合にうまく機能します。

if (to.hash) {
        let el = await findEl(to.hash)
        if ('scrollBehavior' in document.documentElement.style) {
          return window.scrollTo({ top: el.getBoundingClientRect().top+window.scrollY, behavior: 'smooth' })
        } else {
          return window.scrollTo(0, el.getBoundingClientRect().top+window.scrollY)
        }
      }
0
Bruno Reis Silvino