[Nuxt.js] アンカーリンクの遷移が動作しない場合の対処方法

2 min read

状況

  • ページ内アンカーリンクがある - #foo, #bar
  • アンカーリンクをクリックするとページ内遷移ではなく、ルートページに移動してしまう

原因

nuxt.config.jsに設定されているrouter.baseが原因だった(未設定でも下記のようなデフォルト値が入る)

// nuxt.config.js
export default {
  router: {
    base: "/",
  },
};

これにより、<base href="/"><head>内に追加されパスが変わってしまっているようであった。

vue-meta

Nuxt.js においては、vue-router との兼ね合いもあり、head()(vue-meta)経由の<base>の書き換えはできない模様。

(書き換えられたとして、そちら側で問題が起きそう)

対応方法

そのままでは、先述のように<base href="/">に引っ張られてしまうため、アンカー要素に対して処理を施した。

対象のリンクに対して下記のようなイベントを付与。

element.addEventListener("click", (e) => {
  e.preventDefault();
  e.stopPropagation();

  setTimeout(() => {
    const target = document.querySelector(element.hash);
    if (target) {
      window.scrollTo({ left: 0, top: target.offsetTop, behavior: "smooth" });
    }
  }, 0);
});

アンカー要素のイベントを止めて、アンカー対象の要素の位置までスクロールさせるといった処理である。
Nuxt.js 側の処理とかち合うケースがあったため、setTimeoutでタイミングをずらしている。

Next Read

CSS in JSとは何か

想定読者 / そもそも JS フレームワーク(React、Vue.js)を採用する理由とは何か / 「命令的 UI」 と 「宣言的 UI」 / 「命令的 UI」 VS 「宣言的 UI」 / CSS in JS とは / CSS in JS ライブラリ / Emotion の使い方 / 利用するメリット / 利用するデメリット / 関連 / <h2 id="footnote-label" class="sr-only">Footnotes

[CSS in JS] 外部のリセットCSSを使う方法

目的 / 課題 / おまけ

竈門炭治郎をCSS Paint APIで再現する

概要 / 完成品 / 実装方法 / 〆 / 参考

BudouXでOGP画像のテキストを読みやすくしてみた

背景 / BudouX とは / 方法 / 改善結果 / おわりに