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指定したらうまくいきました。


こんにちわ。いつも為になる情報をありがとうございます。

今更ではありますが「こちらのスクリプトを使いたいけどうまく動かない」と相談されまして、気がついたことがありますので補足させて頂きます。

本文中の各ライブラリへのリンクですが、
prototype.jsは1.5.1_rc1へのリンク、
effect.jsはscriptaculousの最新版へのリンクになっているようです。
このため、両ライブラリを読み込んだ時点でjavascriptエラーが発生してしまっています。

effect.jsを使う場合は、prototype.jsへのリンクを下記のscriptaculousにしておいた方が無難かと思います。
http://dev.rubyonrails.org/browser/spinoffs/scriptaculous/lib/prototype.js?format=txt

あるいは、prototypejs.orgのlatest stable版でもいいかもしれません
http://prototypejs.org/download/

今後、このスクリプトを使おうとして同様のエラーでハマる方が居るかもしれません。参考になりましたら幸いです

ご指摘ありがとうございます。
これから参考にされる方のためにも書き換えしておきます。

Coments

▲TOP

FEED

RSS    

ANNOUNCE

JOB INFO




WHO IS WRITING

WEBコンサルタント

ユージック

テクノラティお気に入りに追加する

WEBデザインとシステムの共存、WEBストラテジーを考えた情報設計(IA)を中心とした話題の情報発信をしています。

BOOKS

CREATORS