• Vue.js

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のスムーススクロールで固定ヘッダーの高さ分アンカー位置がズレる（隠れる）場合の解決方法について紹介しました。

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