コンテンツの内部リンクを利用すると、ページが長い場合など見出しを設けたりして、ユーザーが簡単に目的の文章にたどり着くことが出来る。しかし、アンカータグをクリックした場合、瞬間的に移動が行われるためページ遷移した場合との差別化が難しい。そこで利用される手法がスムーススクロール。

df Smooth Scrollの優れた点は、すでにコンテンツで利用されているアンカータグでもスムーススクロールを実装できる点。HTMLヘッダ部分で下記のようにJavaScriptライブラリを呼び出しておくだけで、既存のアンカータグがスムーススクロール用のリンクとして動作するようになる。

<script type="text/javascript" src="smooth.pack.js"></script>
アンカータグの記述
アンカータグをHTMLで記述する際<a name= として記述する。しかし、XHTML、XHTML Basicではname属性が利用できない。id属性ではdf Smooth Scrollが動作しないので、注意する必要がある。

<a name="middle" href="#top">GO TO TOP</a>
アンカータグに対してスムーススクロールを実装することが出来るため、非常に便利。しかし、前述したname属性での利用に限定される点や、他のページから遷移してくる場合はスムーススクロールされない。簡単に導入できるので、試しに導入してみてはいかがだろうか？

最新記事をRSSでお知らせします
ITニュース
df Smooth Scroll - アンカータグを利用してスムーススクロールを実装する
Yahoo!のレンタルサーバーが月額980円で使える！

関連する記事
マウス操作で写真にズームするギャラリーswf（PostcardViewer）
CSSとCanvasで描写するWeb用のUIフレームワーク（Mocha UI）
透明感のあるデザインをJavaScriptで実装する（glassbox.js）
MP4、FLVなど再生するFlashプレーヤーswf （JW FLV MEDIA PLAYER）
FlashやFLV、MediaPlayerに対応したスライドショーJavaScript（shadowbox）
デザインが魅力的なスライドショーJavaScript (Lightview)
楽にフォーム入力チェックを実装するJavaScript （JSValidate）
CSSデザインレイアウトをオンラインで簡単に作成する （YAML）
ユーザーが再配置可能なWedgetを実装するJavaScript （Prototype Portal Class）
フォームボタンCSSデザインするテクニック （Rediscovering Button Element）
半透明の角まるツールチップを表示するJavaScript （CoolTips）
JavaScriptでプログレスバーを簡単に実装する （jsProgressBarHandler）
JavaScriptコード圧縮して盗用から守る （packer）
iTuneのようにカバーアートを表示するFlash （iTunes Coverflow）
画像をサムネイルのサイズで表示するJavaScript （jQuery Thumbs）
Ajaxでサクサク動くWebファイルマネージャ （Relay）
アンカータグを利用してスムーススクロールを実装する　（df Smooth Scroll）
MacでもFlashでホイール操作が出来るようにする （SWFMacMouseWheel）
HTMLなどタグ編集を楽にするエディタ機能JavaScript （jTagEditor）
使いやすいYUIライブラリのWYSIWYGエディタ （Rich Text Editor）

Browser CSS Hack/Filter supportは、IE4, Ns4から、IE8, Fx2, Op9.5, Safari3など、多くのブラウザのCSS Hack/Filterの対応をまとめたサイトです。

Browser CSS Hack/Filter support

Browser CSS Hack/Filter supportは、dithered.comのCSS Filterをバージョンアップしたもので、CSS Hack/Filterの対応を検証しているのは下記のブラウザになります。
※バージョン表記は省略。

Internet Explorer (Windows)：4.0.1～8beta
Internet Explorer (Mac OS)：4.0～5.2.3
Pocket Internet Explorer (PocketPC)：4.0.1～5.2
Gecko(Firefox & Camino)：MM3～1.9b5pre
Netscape Navigator：4.0～4.8
Opera：3.5～9.5beta
Opera Mini：1.2～4.0
Opera Mobile：8.0～8.65
Safari/Webkit：1.0～3.1
Konqueror：1.9.8～4.0.2
OmniWeb：4.0～5.7b2
iCab：2.53～4.01
Netfront：Playstation3～3.5
Hv3：02/03/08
WebTV：1.0～2.6b46

IETesterは、IE5.5, IE6, IE7, IE8beta1の確認が同時にできるアプリケーションです。

少し長くなってしまったため、簡単にポイントをまとめます。
IE8には、「互換モード」、「標準モード」、「より進んだIE8の標準モード」という、3つのレンダリングモードがある。
互換モードはIE6、IE7のものと一緒。標準モードはIE7のものと一緒。
互換性を保つため、IE8の標準モードにはmeta要素やHTTPヘッダによる指定が必要。

/*----------------------------------------
clearfix
----------------------------------------*/
#top div#whatsnew dl:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
*:first-child+html #top div#whatsnew dl {
display: inline-block;
}
/*\\*//*/
#top div#whatsnew dl {
display: inline-table;
}
/**/

CSSマスターの方にご質問させていただきます。現在横並びリストを制作しようとしております。リストに表示する文字の高さを中央揃えにし、カーソルが触れるまでは黒色画像、hover時に赤色画像のバックグラウンドをマイナス設定にてロールオーバー効果を演出しようとしています。IEではきちんと表示されているのですがsafariではパディング分、赤色がズレてしまい、hover時には黒色がズレてしまいます。&lt;UL id=&quot;sitemenu&quot;&gt;&lt;LI id=&quot;side&quot;&gt;あいうえお&lt;LI id=&quot;side&quot;&gt;かきくけこ&lt;/UL&gt;/***********LI設定***********/#side A{ width:60px;　//幅 height:40px;　//高さ margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; background-image : url(背景.gif);　//背景 background-position : 0px 0px; no-repeat; text-align : center; //文字の位置 text-decoration : none;　//文字飾り vertical-align : top;　//文字の高さ padding-top : 10px;　//パディング高さ float : left;}#side A:hover{background-position : 0px -40px; no-repeat;}/***********UL設定***********/#sitemenu{ padding-top : 0px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 0px; margin-right : 0px; margin-bottom : 0px; border-width : 0px 0px 0px 0px; vertical-align : top; text-align : left; list-style-type : none; float : left; }#sitemenu LI{ float : left;}なんとか背景画像がずれない様に表示させていので、どなたかわかる方がいらっしゃいましたら大変申し訳ないのですがご教授お願いいたします。

Quoted: コンテンツの内容が少なくても、常に下部にフッタを配置させるための方法。ウィンドウを下方に広げても、フッタは常に下部に張り付いたままで、逆にウィンドウを上部に縮めていってもコンテンツ部分の所でピタッと止まり、それ以上は移動しません。