最近のサイトはよくページ内リンクをクリックするとスムーズスクロールというアニメーションで移動するというのがありますね。
本日は、その動作を実装するプログラムを解説いたします。
まず使用するプログラム
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秒となります。