最近のサイトはよくページ内リンクをクリックするとスムーズスクロールというアニメーションで移動するというのがありますね。

本日は、その動作を実装するプログラムを解説いたします。

まず使用するプログラム

javascriptを使用します。

また、jQuery というjavascriptのライブラリも使用します。

サンプルプログラム

下記の内容をHTMLファイルのheadタグ内に記述してください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
//スムーズスクロール
$(function(){
$('a[href^=#]').on('click', function(){
var Target = $(this.hash);
var TargetOffset = $(Target).offset().top - 150;
var Time = 700;
$('html, body').animate({
scrollTop: TargetOffset
}, Time);
return false;
});
});
});
</script>

簡単に解説

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

ここでJQueryの本体を読み込んでいます。特段ファイルを用意する必要はありません。これはGoogleのサーバーにアップされているファイルを使用していおります。コチラを読み込むことで手軽にJQueryを使用することが出来ます。

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($){
//スムーズスクロール
$(function(){
$('a[href^=#]').on('click', function(){
var Target = $(this.hash);
var TargetOffset = $(Target).offset().top - 150;
var Time = 700;
$('html, body').animate({
scrollTop: TargetOffset
}, Time);
return false;
});
});
});
</script>

この処理がページ内リンクをaタグの場合はアニメーションにするという処理になります。また、ページ移動のスピードについて、「var Time = 700」という記述があります。この記述の数値を変更することでスピードが変わります。ちなみにスピードは700で0.7秒となります。