ページ内リンクをクリックした時にするするとスムーススクロールさせたい時のjQueryコード

ここ数年で一気に増えたシングルページのWebサイト。

そうしたWeb制作に欠かせないのはページ内を「スルスルーッ」と移動するスムーススクロールのリンク動作。

今回はそうしたスムーススクロールをWebページに実装させるためのコードを解説します。

実際に使うjQueryコードは、下記の記事に掲載しているコードがわかりやすかったので利用させていただいております。

【jQuery】ページ内リンクをするするーっとスムースにスクロールするJavascript | KLUTCHE

jQueryを読み込んで、上記のコードを利用することでページ内のスムーススクロールが可能になります。

それではコードの流れをおおまかに解説していくと、

  1. hrefの値に#が含まれているaタグをクリックした時に動作する。
  2. スムーススクロールのスピードをspeedという変数に設定。
  3. リンク先指定箇所のページ最上部からの位置をpositionという変数に格納。
  4. animateメソッドでpostionの位置までhtmlをスクロールさせる。

という流れになっています。

スクロールの移動スピードを調整したい場合はspeedに設定する値を変更します。

また、スムーススクロールの開始と終了の動きを調整したい場合はanimateメソッドのeasingに関わる引数(上記例ではswingに設定されている)を変更するとひと味ちがう動きが試すことができます。

easingの早見表などを参考にして気に入った動きを使ってみてください。

それではまた!

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

« »