Written by Kasumi

vue-scrolltoのスムーススクロールで固定ヘッダーの高さ分アンカー位置がズレる(隠れる)【解決方法】

Vue.jsのvue-scrolltoライブラリを使ってスムーススクロールを実装している。

ヘッダーをCSSで固定しているのが、アンカー箇所へスムーススクロールした時、ヘッダーの高さ分、アンカー位置がズレてしまう。

固定ヘッダーの高さ分、除外したい。

本記事ではこの様な悩みを解決。

実装方法について解説します。

実装サンプル

See the Pen
vue-scrolltoで固定ヘッダー分高さを除外する方法
by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

アンカーリンクをクリックしてスムーススクロールさせても、固定ヘッダーの高さ分除外されており、位置ズレが起きておりません。

実装方法は以下の通りです。

vue-scrolltoにoffsetを付与

const app = Vue.createApp({
  data() {
    return {
      anchor: "#anchor",
    };
  },
});
app.use(VueScrollTo,{
//ヘッダーの高さ分除外
    offset: -70 
});
app.mount("#app");

vue-scrolltoのオプションにoffsetを付与します。

値にヘッダー要素の高さ分、マイナスpxを設定すればOKです。

以上で解決です。

まとめ

vue-scrolltoのスムーススクロールで固定ヘッダーの高さ分アンカー位置がズレる(隠れる)場合の解決方法について紹介しました。

以上で解説を終わります。

目次

関連記事

Vue.js

Vue.jsで配列要素を動的に追加する方法

2022.09.14
2527
Vue.js

Vue.jsでjsonデータを読み込む方法【axiosを使おう】

2022.09.29
2142
Vue.js

Vue.jsでclass属性を動的に追加する方法

2022.08.29
717
Vue.js

Vue.jsでフォームの入力値をチェックし、リアルタイムで取得する方法

2022.09.11
1528