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

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

sponsors

使用方法

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>

あとは普段通りアンカーリンクを張るだけです。

sponsors

Javascriptサンプルページ一覧
skuare.net

サンプル

ABC

A

A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A
A

TopサンプルABC

B

B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B
B

TopサンプルABC

C

C
C
C
C
C
C
C
C
C
C
C
C
C
C
C
C
C

TopサンプルABC