skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

ページ内をスクロールさせるjavascript「auto-scrolling-page-navigation」

｜ ｜ ｜ ｜ ｜ ｜ ｜

本文が長くなった時、1ページに収めたい時にはアンカーリンクを使い、該当箇所まで飛ばせることがあります。
しかし、アンカーはがくっと一気に遷移するのが嫌いです。
そんな方には、auto-scrolling-page-navigationを使えばスムースなスクロールが可能になります。

使用方法
prototypeからporotype.js、script.aculo.usからeffects.jsをダウンロードします。
次に以下をheadに書き込みます。
<script src="http://yourdomain/prototype.js" type="text/javascript"<>/script>
<script src="http://yourdomain/effects.js" type="text/javascript"<>/script>

<script type="text/javascript">
Event.observe(window, 'load', function() {
$$('a[href^=#]:not([href=#])').each(function(element) {
element.observe('click', function(event) {
new Effect.ScrollTo(this.hash.substr(1));
Event.stop(event);
}.bindAsEventListener(element))
})
})
</script>
あとは普段通りアンカーリンクを張るだけです。
ページ内をスクロールさせるjavascript「auto-scrolling-page-navigation」サンプル

記事作成：2007年09月25日

前の記事：アイキャッチなメニューを作成するjavascript「Menu with slider」
次の記事：グラフ作成javascriptの最高峰「amCharts」