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でslideDownとslideUpするアニメーションを実装する方法

2022.09.23
2399
Vue.js

Vue.jsでタブ切り替えを実装する方法【簡単】

2022.09.03
7517
Vue.js

Vue.jsで開閉するドロップダウンリストを実装する方法

2022.09.02
3237
Vue.js

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

2022.09.11
8357