スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
Posted at --年--月--日 | 記事URL | スポンサー広告 | Top↑

ページ内のスムーススクロールを簡単に実装できるJavaScript『Smooth scrolling』

Smooth scrolling demo

Smooth scrolling』は、アンカータグを使用してページ内のスムーススクロールを実現できるJavaScriptです。

通常アンカータグだけを用いてページ内の移動を行うと、いきなりそのアンカー部分に移動してしまい、ページ内移動なのか別ページへ移動したのか分かりづらいことがありますが、これを用いればページ内のアンカー部分まで画面をスクロールさせながら移動できるのでまぎらわしさがなくなります。

スムーススクロールを実装できるJavaScriptはこれ以外にも色々あるのですが、いくつか試したところ、これが今のところ一番簡単に実装できました。他のJavaScriptのライブラリを用いず単独で使え、アンカータグに追加記述する必要がないのが非常に便利で、既存のページにすぐに導入できます。

以下、実装方法詳細。とはいえ、詳細といえないほど簡単です。

1.まずは「Smooth scrolling demo」から「smoothscroll.js」をダウンロードします。なお、同時に動作デモも見られます。

2.ダウンロードしたら、HTMLの<head>内(</head>の前まで)にJavaScriptファイルへのリンクを記述します。
※「src=""」の部分はリンクするHTMLから「smoothscroll.js」のあるディレクトリへの相対になるので注意。

<script src="smoothscroll.js" type="text/javascript"></script>

たったこれだけで完了です。つまり、スムーススクロールを実装したいHTMLファイルからJavaScriptファイルへリンクすればいいだけです。

アンカータグに特別な追加記述は何も必要ありませんので、既存のページにすぐに実装することができます。「Smooth scrolling demo」のページソースを見れば分かりますが、以下のようにアンカー部分もそこへのリンクも特別な記述は見当たりません。

アンカー部分:<a name="top">Top</a>
アンカー部分へのリンク:<a href="top">Back to top</a>

JavaScriptの動作は、「IE6」「IE7」「Firefox2.0.0.12」「Opera9.24」で確認できたので、主だったブラウザではほぼ動作すると思います。

ただ、他のJavaScriptライブラリとの競合については調べていませんので、他のJavaScriptライブラリを同時に用いている場合はもしかしたらうまく動かない可能性もありますので、その点は注意してください。

▼スポンサードリンク

Posted at 2008年04月05日 | 記事URL | JavaScript | Trackback(0) | Comment(0) | Top↑
1つ後の記事:Firefoxをみっくみくにするアドオン『ぼかろFx』
1つ前の記事:高品質なフリーのアイコンを紹介・配布している『Free Icons Download』














管理者にだけ表示を許可する

トラックバックURL
→http://smallwebmemo.blog113.fc2.com/tb.php/245-a687d920
この記事にトラックバックする(FC2ブログユーザー)
Home
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。