LoginSignup
2
1

More than 3 years have passed since last update.

Nuxt の scrollBehavior のサンプルをそのまま使用すると Firefox でページ内でのアンカーポイント (#id など) への移動にクリックが 2 回必要になる

Last updated at Posted at 2021-02-14

Nuxt の scrollBehavior のサンプルをそのまま使用すると Firefox でページ内でのアンカーポイント (#id など) への移動にクリックが 2 回必要になる

IE や Chrome ではだいじょうぶっぽいです。

scrollBehavior

scrollBehavior - router プロパティ - NuxtJS

上記には以下のような事例が載っています。

scrollBehavior
export default function (to, from, savedPosition) {
  return { x: 0, y: 0 }
}

これを使用すると nuxt-link などによるページ遷移の際に、画面のトップにスクロールします。

そのまま Nuxt を使用した際にリンクによる遷移を行うと遷移先でもスクロールした位置を保持されたりするようなので、
ページの遷移後には画面の上部を表示したい場合などに便利なようです。

Firefox での挙動

しかし前述の scrollBehavior のサンプルをそのまま使用すると、
Firefox 使用時にアンカーポイントへの画面内遷移で妙な挙動を示します。

アンカーポイントとして指定する使い方 - HTMLアンカーリンク(a hrefタグ)とは~使い方と別ページ(target blank)について - SEO ラボ

具体的には 1 度クリックしただけでは移動せず、もう 1 度クリックするとスクロールします。
この挙動は Chrome, Edge, IE では確認されませんでした。

挙動の違い

そこで scrollBehavior に alert を挿入した事例にて挙動の確認を行ってみます。

scrollBehavior-alert
const scrollBehavior = (_to, _from, _savedPosition) => {
  alert(`scrollBehavior`);
  return { x: 0, y: 0 };
};

export default scrollBehavior;

Chrome の場合

Chrome の場合「b」をクリックした直後 alert が表示され、そのあと対象のポイントへ移動します。

image.png

Firefox の場合

Firefox の場合「b」をクリックして alert が表示されたタイミングで画面内の遷移が行われ、
この後には画面のトップに戻ってしまいました。

alert の実行後に scrollBehavior に定義したトップへの移動が行われているようです。

image.png

その後改めて「b」をクリックしたところ、 alert は表示されず 対象のポイントへ移動しました。

Firefox ではこのポイントへの移動タイミングの違いによりクリックが 2 回必要になっていると思われます。

Firefox でも大丈夫な事例

以下は軽く確認したものですが Firefox でも 1 回のクリックで遷移するようにしたものです。

#id などのフラグメントの値は route.path に含まれ ないため、
to, from の path を比較し、そこに差異がある場合にトップにスクロールする制御をかけています。

scrollBehavior-firefox
/** @type {import('@nuxt/types').NuxtOptions['router']['scrollBehavior']} */
const scrollBehavior = (to, from, _savedPosition) => {
  if (to.path !== from.path) {
    return { x: 0, y: 0 }
  }
  return undefined
}

export default scrollBehavior
2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
1