ページ内をスクロールさせる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サンプルページ一覧

skuare.net

サンプル

A、B、C

A

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

Top、サンプル、A、B、C

B

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

Top、サンプル、A、B、C

C

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

Top、サンプル、A、B、C