プログラミング、気楽な生き方を中心に発信しています。
  • twitter
  • instagram
  • facebook

【jQuery】スムーズスクロールの作り方【ページ内リンクをスムーズに移動できる】

  • スムーズスクロールて何?
  • スムーズスクロールってどうやって作るの?
  • スムーズスクロールの使い方を知りたい!

こんな疑問をもっている方向けの記事です。

作ったサイトが何か物足りないな〜。という時にスムーズスクロールを使うだけでサイトの雰囲気が一気に変わりますのでオススメです。

汎用性も高く簡単に導入する事ができるのでスムーズスクロールが使いたい方は参考にどうぞ。

僕について

新卒でWEB制作会社に入社、現在はフリーランスとして活動していきます。

スムーズスクロールの作り方【ページ内リンクをスムーズに】

jQueryでの実装なので簡単です。

スムーズスクロールとは

ページ内のリンクを押した時にスムーズにスクロールする方法です。

1ページ完結型のサイトやページトップに戻るボタンなどがある時にページ内をスムーズにスクロールする事ができます。

ユーザビリティも良くなりますので最近主流になっております。

スムーズスクロールを実装するだけで、一気に素人感がなくなるのでおすすめです。

スムーズスクロールの作り方

下記のコードをjsファイルにコピペするだけで簡単に実装できます。

jQuery
//スムーズスクロール jQuery(function(){ jQuery('a[href^="#"]').click(function(){ var speed = 400; var href= jQuery(this).attr("href"); var target = jQuery(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; jQuery("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); });

125naroom様の【jQuery】ページ内リンクでスムーズスクロール(スクロール位置の調整も簡単にできる)という記事を参考にしました。シンプルでとても使いやすいです。

詳しい設定のカスタマイズ方法などを解説されておりますので、興味のある方はどうぞ。

スムーズスクロールの使い方

aタグのhref属性に#〇〇〇〇を設定する事で任意のidクラスまでスムーズにスクロールさせる事ができます。

主に活躍するサイトは下記の通りです。

  • 1ページ完結型サイト
  • ランディング’ページ
  • ページトップに戻るボタン

簡単に実装できてユーザビリティも向上しますので最高ですね!

それでは。