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すると思うのは僕だけでしょうか？
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 | 2007年11月19日 03:35
5ddessさん＞
コメントありがとうございます。
綺麗なサイトですね～。
サイトを見たところjavascriptエラーが出ているようですね。
おそらく他のスクリプトとprototype.jsとの関数のバッティングが起こってるのかもしれませんね。
僕もjavascriptを完全に理解していないので、お力添えできませんが、プログラマーにでもバッティングを直してもらうか、prototype.jsの使用を諦めるしかないような気がします。
投稿者: u-ziq | 2007年11月20日 02:19
オブジェクトが見つからない類のエラーだったなら、auto-scroll.jsの呼び出し場所でcharsetを指定するとうまくいくのではないでしょうか？
私もそのままやったら外部呼出しでNGでしたが、charset指定したらうまくいきました。
投稿者: river | 2008年4月18日 19:32
こんにちわ。いつも為になる情報をありがとうございます。
今更ではありますが「こちらのスクリプトを使いたいけどうまく動かない」と相談されまして、気がついたことがありますので補足させて頂きます。
本文中の各ライブラリへのリンクですが、
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/
今後、このスクリプトを使おうとして同様のエラーでハマる方が居るかもしれません。参考になりましたら幸いです
投稿者: fingolfin | 2009年5月25日 16:53
ご指摘ありがとうございます。
これから参考にされる方のためにも書き換えしておきます。
投稿者: ユージック | 2009年5月30日 22:49