Mar14

prototype.jsを利用したスムーズなページスクロール

最新の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すると思うのは僕だけでしょうか?

Related entries

Track back URL

http://www.u-ziq.com/cgi/mt/mt-tb.cgi/135

この一覧は、次のエントリーを参照しています: prototype.jsを利用したスムーズなページスクロール:

» スムーズスクロールでページトップへ移動 from サイコロデザイン
スムーズスクロールでページトップへ移動 [詳しくはこちら]

Coments

こんばんは5ddessと申します。
この記事の内容を真似、スムーススクロールを試してみたのですがなぜかうまくいきません。

場所はこちらです
http://www.link-asset.co.jp/outline.html

外部スクリプトとして以下のように記述


各jsファイルはそのまま使っています
http://www.link-asset.co.jp/js/prototype.js
http://www.link-asset.co.jp/js/effects.js
http://www.link-asset.co.jp/js/auto-scroll.js

リンク方法は以下の通り

アセットマネジメントサービス
賃料値上げ代行サービス
リージングマネジメント
オーダーメイドソリューション
Q&Aよくあるご質問


もしくは
このページの上部に戻る

HTMLのヴァージョンは


お手透きの時にでもよろしくお願いいたします。
5ddess

5ddessさん>
コメントありがとうございます。
綺麗なサイトですね~。

サイトを見たところjavascriptエラーが出ているようですね。
おそらく他のスクリプトとprototype.jsとの関数のバッティングが起こってるのかもしれませんね。

僕もjavascriptを完全に理解していないので、お力添えできませんが、プログラマーにでもバッティングを直してもらうか、prototype.jsの使用を諦めるしかないような気がします。

オブジェクトが見つからない類のエラーだったなら、auto-scroll.jsの呼び出し場所でcharsetを指定するとうまくいくのではないでしょうか?
私もそのままやったら外部呼出しでNGでしたが、charset指定したらうまくいきました。


Coments

▲TOP

FEED

RSS    

MOBILE

二次元コード