jQueryでスムーズにページ内リンクを移動する方法

jQueryでスムーズにページ内リンクを移動する方法 javascript
この記事は約2分で読めます。
スポンサーリンク

ページ内のリンクになにも設定しない場合、アニメーション無しでカクッと切り替わっちゃって大変不格好。
そんな不格好なページ内リンクを優しくするする~っと移動する方法をご紹介します。
下のコードをjsファイルに張り付けると、ページ内リンクのaタグ全てにスムーススクロールが適応されます。
いまいち動きが分からない方へ、実際にスムーススクロールを使ったdemoも載せておきますので、
ご確認していただけると伝わりやすいかもしれません。

【jQuery】

  $(function() {
    $('a[href^="#"]').on("click", function() {
      var speed = 600;
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
    });
  });

【なにも設定しない場合】

See the Pen
スムーススクロール無し
by endebataro (@endebataro)
on CodePen.

【aタグにスムーススクロールを追加した場合】

See the Pen
スムーススクロール有り
by endebataro (@endebataro)
on CodePen.

SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました