問題 × 解決策

ページ内リンクをスクロールでなめらかに移動させる

問題

ページ内リンクをスクロールでなめらかに移動させるには?

解決策

jQueryのクリックイベントを用いて、リンク先のIDのタグの位置「offset().top」までanimateで移動させる。

 

ページ内リンクの挙動のカスタマイズ

ページ内リンクをクリックした際の挙動は、突如そのリンク先に移動します。
これをスクロールでなめらかに移動させる方法をご紹介します。

  • 今回は固定している上部バーをクラス「topbar」と定義します。

DEMOはこちら

javascriptの構築

aタグのhrefが#から始まっているものに対して、クリックイベントを行います。

// #で始まるアンカーをクリックした場合に処理
jQuery('a[href^=#]').click(function() {
  // スクロールの速度
  var speed = 1000; // ミリ秒
  // アンカーの値取得
  var href= jQuery(this).attr("href");
  // 移動先を取得
  var target = jQuery(href == "#" || href == "" ? 'html' : href);
  // 移動先を数値で取得
  var position = target.offset().top;
  // スムーススクロール
  jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
  return false;
});
  • hrefからリンク先のタグの情報を取得し、そのタグの位置「offset().top」を取得します。
  • bodyタグ、htmlタグに対し、animateを用いてその位置まで移動させます。

参考

【福島県郡山市のホームページ制作、Web制作 Kyasper Web Design キャスパーウェブデザイン » jQuery とっても簡単、ページ内リンクでスムーズスクロール】
http://kyasper.com/jquery-tips/

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

twelve − one =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧