【jQuery】aタグをクリックするとページ内スクロールする方法

今回はjQueryを使って、「aタグをクリックするとページ内スクロールする方法」について解説していきます。

コピペできるので、是非真似して実装してみてください!

aタグをクリックするとページ内スクロールする方法

完成形はこちらです。

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

headerにあるセクション1・セクション2・セクション3のナビメニューをクリックしてみてください。

クリックすると、指定のセクションまで自動でスクロールするでしょう。

今回は上記のように、ナビメニューのaタグをクリックすると自動でページ内スクロールするようにコーディングしていきます!

※ レスポンシブコーディングはしていません。

準備

まずはjQueryのコードをbodyタグの閉じタグの上に書きましょう。

こちらを書くことで、jQueryを使うことができます。

HTML

まずはheaderを作成していきます。

ページ内スクロールを作る上でのポイントは、まずクリックしてページ内スクロールさせたいaタグに対して「#」をつけた値を、aタグの中にあるhref属性に記述します。

今回は「#sec1・#sec2 ・#sec」をaタグに指定しました。

そしてスクロールして移動させたい部分に「id=””」を指定します。

以下のように名前を揃えておきましょう。

「#sec1」→「id=”sec1″」

「#sec2」→「id=”sec2″」

「#sec3」→「id=”sec3″」

名前を揃えないと、ページ内スクロールしないので注意してください!

CSS

JavaScript

「#」が指定されているaタグをクリックすると、1秒の速度でページ内スクロールするようにしました。

「var speed = 1000;」の数字の部分はスクロールのスピードなので、自由に変えてみてください。

まとめ

以上が、jQueryを使って、「aタグをクリックするとページ内スクロールする方法」でした。

WEBサイトで頻繁に使われる実装なので、是非挑戦してみてください。

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

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

関連記事