ページ内でのアンカーリンクは、
リンクをクリックすると一瞬でリンク先へ遷移する為、
現在の位置が分からなくなったり、ページが切り替わったのかどうか、の判断もできず
閲覧者に混乱をまねく可能性があります。

そこで最近良く見るのがスライドスクロール。
アンカーリンクをクリックすると、そのリンク先までスクロールして表示する方法。

これを使おうとすると意外と面倒な記述が増えたりする為、
あまり今まで使用していませんでしたが、
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名を付けるだけで出来ます。

こういったシンプルなライブラリは活用していきたいです。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (3)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryのスライドスクロール

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner