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

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

このような方向けの記事になります。

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

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

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

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

スムーズスクロールとは

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

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

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

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

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

下記のコードを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】ページ内リンクでスムーズスクロール（スクロール位置の調整も簡単にできる）という記事を参考にしました。シンプルでとても使いやすいです。

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