ページ内でのアンカーリンクは、
リンクをクリックすると一瞬でリンク先へ遷移する為、
現在の位置が分からなくなったり、ページが切り替わったのかどうか、の判断もできず
閲覧者に混乱をまねく可能性があります。
そこで最近良く見るのがスライドスクロール。
アンカーリンクをクリックすると、そのリンク先までスクロールして表示する方法。
これを使おうとすると意外と面倒な記述が増えたりする為、
あまり今まで使用していませんでしたが、
jQueryでスライドスクロールを少ない記述で手軽に可能にするプラグインがありました。
jQuery本体とスクロール用JSファイルを読み込み、
ソース上には
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
<script language=”javascript” type=”text/javascript”>
$(document).ready(function() {
$(‘a[@href^=”#”]’).click(function(){
$($(this).attr(“href”)).ScrollTo(1000, ‘easeout’);
return false;
});
});
</script>
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
とスクリプトを追加。（これも外部化してもありかも）
通常の<a name=”n” id=”n”></a>みたいなアンカーリンク用のタグを埋め込む必要は無く、
<div>などで使用している id に対して指定することが出来ます。
実際に試してみたのがコレ（モデルはうちの愛娘達です）
↓↓↓↓↓↓↓↓↓↓↓↓↓
リンクさせる<a>タグに<a href=”#n”>○○○○</a>の様な形で、
n の部分に id名を付けるだけで出来ます。
こういったシンプルなライブラリは活用していきたいです。