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でclass属性を動的に追加する方法

2022.08.29
130
Vue.js

【Vue.js】v-modelを使いselectの値を取得。初期値を設定する方法

2022.09.25
80
Vue.js

Vue.jsでページ内トップへ戻るボタンを設置する方法

2022.09.18
89
Vue.js

Vue.jsでHTML要素をコンポーネント化(パーツ化)する方法

2022.09.01
121