ページ内リンクをjQueryでスムーズスクロールした際のずれを解消する方法

縦長のウェブサイトのページ内リンクは、jQueryなどでスムーズスクロールするようにしておくと、どこに移動したのか閲覧者にとってわかりやすいですね。

しかしせっかくのスムーズスクロールも、position: fixedでメニューバーを固定しているような場合、ズレてしまって思ったように表示されません。
そこでjQueryに少し追記してズレの高さ分を処理する方法です。

の箇所の数値(100)は任意で調整してください。

なお、当初cssでpaddingmarginを相殺しつつ表示を調整する方法で対処していましたが、調整した数値がメニューバーのリンクとかぶってしまうとメニューバーのボタンをうまくクリックできない不具合があったため、jQuery側で調整するのが個人的には良いと思います。


大変参考にさせて頂きました!: 
position:fixedでヘッダ固定時のページ内リンクのずれを解消したい
jQuery とっても簡単、ページ内リンクでスムーズスクロール

西山
西山 寛之(にしやま ひろゆき)
1975年生まれ O型 | 愛媛大学法文学部卒業
レコードショップ運営~大利木材取締役[ ウェブ制作・運用/営業/CTO ]を経て、
2015年4月 パソラボ設立。
投稿日 カテゴリー Blog タグ , , .

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です