Blog

HOME > Web > JQuery > 【jQuery】ページ内リンクのスムーズスクロール

【jQuery】ページ内リンクのスムーズスクロール

2017/04/03

JQuery

備忘録です。

ページ内リンクでスムーズに動くアレ（jQuery）です。

参考サイト
ページ内リンクでスムーズスクロール

jQuery1とjQuery2で若干記述方法が違います。

jQuery1

$(function(){
   // #で始まるアンカーをクリックした場合に処理
   $('a[href^=#]').click(function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
      // アンカーの値取得
      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;
   });
});

jQuery2

$(function(){
  // #にダブルクォーテーションが必要
   $('a[href^="#"]').click(function() {
      var speed = 400;
      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;
   });
});

予め、jQueryのバージョンを確かめてから実装したほうが良さそうです。

カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ