ページ内でのアンカーリンクは、
リンクをクリックすると一瞬でリンク先へ遷移する為、
現在の位置が分からなくなったり、ページが切り替わったのかどうか、の判断もできず
閲覧者に混乱をまねく可能性があります。
そこで最近良く見るのがスライドスクロール。
アンカーリンクをクリックすると、そのリンク先までスクロールして表示する方法。
これを使おうとすると意外と面倒な記述が増えたりする為、
あまり今まで使用していませんでしたが、
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名を付けるだけで出来ます。
こういったシンプルなライブラリは活用していきたいです。
グリッドデザインの綺麗なサイト「Pline Studios of Architecture」 - BlackFlag – Web Development Technical | 2010.10.09 15:01
[...] 以前ここで「jQueryのスライドスクロール」と題して、jQueryでのページ内スクロールを紹介しましたが、 同じような動作をサイト全体の構成として使って、綺麗なグリッドデザインを表現している 「Pline Studios of Architecture」が美しかったのでご紹介。 [...]
jQueryのスライドスクロール | BlackFlag | webサイト作成に関する自分メモ | 2013.02.25 19:06
[...] jQueryのスライドスクロール | BlackFlag 2013/02/25 pein0325 jquery No comments http://black-flag.net/jquery/20090130-79.html [...]
jQueryのスライドスクロール | BlackFlag | webサイト作成に関する自分メモ | 2013.02.25 19:06
[...] jQueryのスライドスクロール | BlackFlag 2013/02/25 pein0325 jquery No comments http://black-flag.net/jquery/20090130-79.html [...]