ユージック

最新のPrototype version 1.5.1_rc1と最新のscript.aculo.usのeffects.jsをを使った超簡単でしかも高機能なページスクロールを実現できる記事を見つけたのでご紹介します。

auto-scrolling page navigation

以下のコードをauto-scroll.jsとして保存します。

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))
  })
})

Prototype version 1.5.1_rc1をDLしてprototype.jsとして保存、そしてlatest build of script.aculo.us Effectsをeffects.jsとして保存して、先ほどのauto-scroll.jsと一緒に読み込みます。

<script src="prototype.js" type="text/javascript"></script>
<script src="effects.js" type="text/javascript"></script>
<script src="auto-scroll.js" type="text/javascript"></script>

(X)HTMLのコード

(X)HTMLのコードは以下のように、アンカー毎にJavascriptを記述しなくても、IDで指定するのみで、スムーズなページスクロールの機能を実装することが出来ます。

<a href="#○○○">○○○へ戻る</a>

ページのTOPに戻る機能だけではないので、ページ内でのローカルメニューなどで使うことでかなりアクセシビリティーがUPすると思うのは僕だけでしょうか？

• Prototype.jsのv.1.5.1での新機能DOM Builder
• prototype.jsを利用したスムーズなページスクロール