【jQuery】グローバルメニューのページ内リンクをクリックしたらメニューを閉じて対象の箇所まで自動スクロールさせる方法

今回は、「グローバルメニューのページ内リンクをクリックしたらメニューを閉じて対象の箇所まで自動スクロールさせる方法」について紹介します。

コピペして使い回すことが出来るので、是非参考にしてください。

【jQuery】グローバルメニューのページ内リンクをクリックしたらメニューを閉じて対象の箇所まで自動スクロールさせる方法

完成形はこちらです。

See the Pen
Untitled
by webis (@webis-co)
on CodePen.

ページ内リンクをクリックしたらメニューが閉じられて、対象のセクションまで自動スクロールするのが分かるでしょう。

HTML

ハンバーガーメニューとグローバルナビ、そしてコンテンツを用意します。

CSS

jQuery

jQueryを使うために、まずはbodyタグの直前に以下のコードを記述してください。

そしてその他のjQueryコードはこちら。

まとめ

以上が、「グローバルメニューのページ内リンクをクリックしたらメニューを閉じて対象の箇所まで自動スクロールさせる方法」でした。

この記事を書いた人
Yujiro WEBコーダー

大阪のWEB制作会社で働くコーダー。コーディングにハマり、気づいたらWEB制作を仕事にしていました。現在は新規のWEBサイト制作やWordPressカスタマイズしたり、当技術ブログを運営しています。

関連記事