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>
あとは、ハッシュタグを使って、スクロールさせたい場所を指定するだけです。
この記事のおかげで、すごく簡単にスクロール機能を設定できました。
ありがとうございました！
cho さんはじめまして！コメントありがとうございます。
出来るだけシンプルなコードでサイト構築したいですよね。
導入も簡単だったということで、お役にたてて嬉しいです ( ´ ▽ ` )ﾉ