jQuery を使ってページ内をスクロールさせる

ページ内の任意の箇所へ、アニメーションしながらスクロールすることが可能な jQuery プラグインはたくさんありますが、スクロールさせるためだけの jQuery プラグインってのも気が進みません。
jQuery プラグインをわざわざ使わなくても、スムーズスクロールを実装する方法をご紹介します。
ここで紹介する方法は、ハッシュタグを使って簡単にページ内をスクロールさせる方法です。

使用方法

まずは jQuery を、head 内に記述し読み込みます。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

次に head 内に以下を記述し読み込みます。
※ common.js みたいな外部ファイルを用意されている方は、その中に以下を記述するとスッキリしますね。

<script type="text/javascript">
$(function(){
	$('a[href^="#"]').click(function() {
		$('html:not(:animated), body:not(:animated)').animate({ scrollTop: $($(this).attr('href')).offset().top}, 'slow', 'swing' );
		return false;
	});
});
</script>

あとは、ハッシュタグを使って、スクロールさせたい場所を指定するだけです。

サンプル

About this entry

2 Comments

One Response to 2

  1. cho より:

    この記事のおかげで、すごく簡単にスクロール機能を設定できました。
    ありがとうございました!

    • Yasutomi より:

      cho さんはじめまして!コメントありがとうございます。
      出来るだけシンプルなコードでサイト構築したいですよね。
      導入も簡単だったということで、お役にたてて嬉しいです ( ´ ▽ ` )ノ

コメントを残す

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