Home > Tags > id属性

id属性

ページ内をスムーズスクロールさせる正規の方法

2009-03-01 (日)
ウェブデザイン | デザイン関連
id属性 | jquery | smooth | XHTML | ウェブ標準 | スムーズスクロール | ページ内リンク | ホームページ作成

スムーズスクロールは格好いいけど・・・
ホームページの1ページが縦長になってしまう場合、ページ内リンクを設置して、より情報を探しやすくする手法はよく用いられますね。単なるページ内リンクをするだけなら誰でも簡単に導入できるわけですが、ちょっとでも格好良く見せたいところです。そこで、良く使われるのがJqueryと「smooth.pack.js」を使ったスムーズスクロールの方法があるわけです。

スムーズスクロール「smooth.pack.js」の問題点
スムーズスクロールを実現するのに、あちこちのサイトでよく使われているのが「smooth.pack.js」というものだと思いますが、実はこの方法にはちょっと問題があります。このスクリプトでは、nameタグを使用してページ内の任意の位置にスクロールさせるわけですが、この方法では、現在のホームページ作成に求められる「ウェブ標準」の仕様に反する手法になっています。ウェブ標準ではXHTMLでコーディングするんですが、XHTMLではname属性だけのアンカーは使えないんですね（厳密には推奨されていないというべきか・・・）。

そこで取られてきた方法として、アンカーに以下のように記述する方法があります。

<a name=”top” id=”top”></a>

しかし、どうもスマートじゃないですね～。実際には推奨されていないname属性も使われているわけだし・・・。

ウェブ標準に準拠したXHTML対応版スムーズスクロール
そこで、あちこちググって探し回ってみたところ、「smooth.pack.js」の変わりになるものを見つけました。
http://coliss.comに「Page Scroller ver.3」なるものがあり、このスクリプトではid属性を使用してスムーズスクロールを実現できます。これにより、XHTMLにも準拠した正規の記述方法でページ内リンクをスムーズスクロールさせることが可能になります。

設置方法は簡単で、ヘッダー内に「Jquery」と「page-scroller.js」を読み込むためのタグを挿入するだけです。みなさんも是非使ってみてください。

★Jquery関連オススメBook

[tmkm-amazon]4774134902[/tmkm-amazon]

[tmkm-amazon]4839928541[/tmkm-amazon]

[tmkm-amazon]4839928258[/tmkm-amazon]