sigma visual ajax gui builderは、簡単に言えば、
HTML+JS（+バックエンドにPHP）のWEBアプリケーションをつくるための、
WEB版VisualBasicのようなもので、構築もWEBブラウザ上で行います。

インストールは簡単。

sigma visual ajax gui builderの公式サイトのダウンロードページから「jsLinb 」をダウンロード。

解凍してできた「sigma-visual-builder」フォルダを適当な名前にリネームして、
フォルダごとサーバーへアップロード
VisualJS/projects/
へ書き込み権限を与えます。

これでインストール完了。簡単でしょ？

GUIビルダは、本格的なIDEモードと、シンプルモードがあります。
シンプルーモードは色々なところで簡単なTipsが書かれているので割愛で、
以下、IDEモードの説明をします。

http://サーバー/インストールディレクトリ/VisualJS/

へWEBブラウザからアクセスします。

こんな画面になります。VisualStudio的な画面ですよね？
早速プロジェクトを作ってみましょう。

赤く囲んだ箇所をクリックすると
　

　
こんなダイアログが出てくるので、プロジェクト名に適当な名前を入れて、
OKをクリックします。
　
　
　
すると、このようにファイルが自動生成されます。
これらのファイルは、VisualJS/projects/内に自動でファイル生成されます。
　

　
「App/js/index.js」をクリックすると、IDE上にソースが展開されます。
ここに表示されている、「デザイン」をクリックすると、、、
　

　
こんな感じに、どうだVBだろ！？といわんばかりのRAD画面に。
ここにパーツを置いていって、開発を行うわけです。
　
Hello,worldについては、
公式のリファレンスと何も変わらないので、割愛します。
　
あとは、
　

　
保存して実行すれば、アプリケーションが走り出します。
　

WEB屋をやってると、エンドユーザーに見えるフロント側から考えがちなのですが、
私はフロントよりバックエンド側から考えなければ、動的サイトの意味がないと考えています。
使いくいとか、運営企業のうち担当者独りだけに、運営ノウハウがたまってしまうなど弊害が多いためです。
　
また、フロント側は定期的に手入れするというは当たり前ですが、
バックエンドも日々手入れしなければ、それも動的の意味がないと考えています。
バックエンド側はまさにWEBアプリケーションなのにも関わらず、
アップデートが長い間行われないなどでは、動的にする意味が極端に薄くなると思います。
　
実装のために、
HTMLを起こして、それをPHPやPerlなどと連携したりというのは、
WEB屋としては大変な作業ではないかもしれませんが、
それを定期的（というか毎日でもいいくらい）に手入れしようとおもうと、
HTMLでは大変だと思います。
　
このあたりをクリアできないかと、RADツールを調べているところで、

• RADPHP XE http://www.embarcadero.com/products/radphp
• REAL studio WEB版 http://www.realsoftware.com/?lang=jp

なども触ってみました。
これら両方ともかなりすばらしいツールで、びっくりしたのですが、
私のこなす仕事に対しては、ちょっと大きなツールかなという印象もあり、
昔MOONGIFTさんで拝見したツールを思い出した次第です。
　
Sigma Visual Ajax GUI Builderが、その答えになっているのか、
正直なところわかりませんし、
動的と考えたとき、CodeIgniterなどのWAFなどと連携ができるのかなど課題も山盛りですが、
もう少し使い込んでみます。

//ノードの取得
var node = tree.getNodeById('ノードのID');
//ノードUIの取得
var ui = node.getUI();
//チェックする
ui.toggleCheck( true );

toggleCheck()に渡す値をfalseにすればチェックが外れます。
　
TreeNodeUIのリファレンスまでちゃんと読んでいなかった僕のミスでした。。。
すみません。

Ext.JS本家のサンプルはこんな感じ→http://www.sencha.com/deploy/dev/examples/tree/check-tree.html
　
で、諸事情から、ここについているチェックボックスのチェックをJSで動的に着け外ししたい。
　
チェックが付いているノード（各要素）を取得できるメソッドは用意されているのに、
チェックを付けるメソッドが標準でない(T_T)
　
仕方ないので、Ext.JSを解析。（これが約1時間の作業。泣）
ノードはtreeNodeオブジェクトとtreeNodeUIオブジェクトから成立していることが分かった。
　
treePanelからtreeNodeを取得するには、getNodeById()を使えば良い。
そしてtreeNodeからtreeNodeUIを取得するには、getUI()を使う。
チェックボックスはtreeNodeUIのcheckboxというメンバで保存されている。
こいつのcheckedプロパティをtrueにしてやれば、できた。
ところが、当たり前だけど、checkboxのプロパティを変更するだけでは、
treeNodeUIのcheckedプロパティは変更されないので、
こちらも合わせて動的変更する必要がある。
　
というわけで、次のように書いた。
　

//ノードの取得
var node = tree.getNodeById('ノードのID');
//ノードUIの取得
var ui = node.getUI();
//チェックボックスにチェックをつける
ui.checkbox.checked = true;
//ノードのcheckedプロパティを変更
node.checked = true;

　
大体こんな感じ。
　
回りくどい。
出来る人はExt.JS自体を改変した方がいいですよー。
（多分PGなら、ここまで分かれば、あとはどこを改変すればいいかわかると思うので割愛）

<a href="javascript:;" onclick="doSubmit();">送信！</a>

<form action="test.php" method="POST" id="testForm" name="testForm">

<input name="testVal" type="hidden" value="テストだよ">

</form>

上記のようなHTMLがあるとして、

function doSubmit(){

	document.getElementById('testForm').submit();

}

上記のようなJS関数を実行してフォームを送信しようとすると、

Firefoxでは問題なく送信できるが、IEでは送信できない(>_<)

<a href="javascript:void(0);" onclick="return doSubmit();">送信！</a>

<form action="test.php" method="POST" id="testForm" name="testForm">

<input name="testVal" type="hidden" value="テストだよ">

</form>

と修正して、

function doSubmit(){

	document.getElementById('testForm').submit();

	return false;

}

JSはこのように変更。

何をしたかというと、<a>のhrefをvoid(0)で無効化して、さらに、onclickはfalseを返すようにする。IEではどうやら、JS関数の中のsubmit()より、<a>の働きが優先されるようで、これらをすべて無効化する必要があるよう。

これで半日悩んだ。
ある意味正しいような、でも、なんか納得いかない(>_<)

IEはツンデレだ・・・いやツンツンしてるだけか（爆

<a href="javascript:void(0);" onclick="return doSubmit();">送信！</a>

<form action="test.php" method="POST" id="testForm" name="testForm">

<input name="testVal" type="hidden" value="テストだよ">
<input type="submit" name="submit" id="submit" value="送信" />

</form>

こんな風に<form>タグの中に「submit」という名前の要素が入ると、submit()ができなくなる。これも注意。

JSは何でもかんでもオブジェクトなので、同じ名前のものがあれば、当然そちらで上書きされる。

迂闊な名前をつけるのはやめよう。

高卒以上のレベルの人でプログラム言語に慣れ親しんでない人が「関数」と聞くと、数学で習った「二次関数」とかの「関数」を思い出すと思います。
※「高卒レベルの人」でと誤解される書き方をしていました。申し訳ありません。正しくは上記の通り「高卒以上のレベルの人」です。

数学で習った「関数」は、ちょっと意味は似ているところがありますが、この際きれいさっぱり忘れたほうがいいです。ということで数学の関数は忘れて話をすすめます。

で、関数っていうのはプログラミング言語やプログラマーによって結構考え方や概念が異なりますので、BASIC（VBではない）やPerlで育ってきた僕の個人的な考えで書いていきます。

お友達デザイナーがActionScriptを勉強していて躓いたらしいですので、僕はASが書けないってことでJSで書いていきます。

Javascriptの入門向け命令辞典を読んでいて、たとえば、「特定の文字列をURLエンコードしたい」というときは以下のような命令を書けと書いてあることがあります。

var str = '文字列';
str = encodeURIComponent(str);
document.write( str );

これを実行すると、「%E6%96%87%E5%AD%97%E5%88%97」と表示されると思います。

encodeURIComponent()という命令を使うことで、「文字列」という文字列を簡単にURLエンコードできます。

実はこの「encodeURIComponent()」が「関数」です。

Javascriptの入門書などで「関数」と言えば、上記のような説明をした上で、

function 関数名( 引数1, 引数2... ){
    手順;
    return 返り値;
}

と書け。みたいなことが書いてあります。

まったくもって、間違いじゃないんですけど、その前に、自分で作らなくても、

Javascriptには最初から前述「encodeURIComponent()」のような便利な関数はたくさん用意されているんです。

たとえば他に
document.write()
alert()
confirm()
window.close()
などなどあります。

こうやって書いてみると、どうでしょうか？プログラミングの初心者でも、これまで書いたプログラムのコードの何割かは関数を使っている部分で埋められているのではないでしょうか？関数は現在の発展したプログラミングにおいては、とても有用なもので、プログラミング言語によって最初からたくさんの関数が用意されています。

前述の「function」を使った「自分で作る関数」は、最初から用意されている関数のほかに、決まった命令をまとめておいたり、それを再利用したりしたい時に作る関数で、一般的に「ユーザー定義関数」などと呼ばれます。言語が最初から用意している関数に対して、自分で作る関数だから「ユーザー定義関数」。分かりやすいネーミングです。はい。

※完全な低級言語やC言語のような低級に近い言語は関数は少なくなるかも。
※window.close()などはオブジェクトのメソッドなので厳密には「最初から用意された関数」ではない。
↑ここの※部分はお友達デザイナは無視したほうがいいですｗｗｗｗ

前述の通り、関数は決まった手順をまとめておくもの、そしてそれを再利用できるようにしたものです。

料理で言うと、ダシとかスープみたいなものかな。前もって「一番ダシ」とか用意しておくことがあると思います。関数は、それに近いかな。

「引数」は、そこに醤油や塩などの追加調味料や、メインとなる食材など、目的とする料理に合わせて何かを追加してひとつの料理として完成させたり、また違うひとつの材料にしていったりして行くわけですね。材料を入れたりして加工したものが「返り値」に近いですかね。

では実例。まず関数を使わない例です。

例1

var str_1 = 250;
str_1 = Math.floor( str_1 * 1.05 );
alert( str_1 + '円です。' );

var str_2 = 500;
str_2 = Math.floor( str_2 * 1.05 );
alert( str_2 + '円です。' );

端数切捨てで消費税額を計算して、その結果をalert()するという内容ですね。

上記例の場合、２つの額に対して消費税計算をしていて、同じような処理を繰り返しています。
この場合同じパターンが２つですから、まだマシですけど、3つ4つ･･･となっていくとなんだかなぁとなります。

こういった決まったパターンがあるときに使うのが関数というわけですね。

関数を使うといっても、プログラム全体の設計によっていくつかの関数の実装が考えられます。
例1においてもそうです。

例1のプログラムを見て重複している部分は、
・変数に1.05をかける。
・1.05をかけた変数を小数点以下切り捨てる。
・この変数のあとに「円です」をつけてalert
という流れです。

ここを関数にします。

例2

//↓ここで関数定義！
function taxAndAlert( str ){
	str = Math.floor( str * 1.05 );
	alert( str + '円です。' );
}


//↓ここから実行文
var str_1 = 250;
taxAndAlert( str_1 );

var str_2 = 500;
taxAndAlert( str_2 );

こんな感じです。 例1と比べるとMath.floorなどの何回もあった面倒な手続き一式がまとめられています。ここが関数。実行文のところでは作った関数「taxAndAlert」を実行しているだけで、Math.floorを何度も書いたりなど面倒が少しラクになります。

さて、話は少し戻り、関数の実装パターンはいくつか考えられるということを書きました。次のパターンを考えてみましょう。

例3

//↓ここで関数定義！
function taxAndReturn( str ){
	str = Math.floor( str * 1.05 );
	return str;
}

//↓ここから実行文
var str_1 = 250;
alert( taxAndReturn( str_1 ) );

var str_2 = 500;
alert( taxAndReturn( str_2 ) );

↑ 例2と比べてみると、関数の中でalertを実行していないことが分かります。

ぱっと見、「あれ？繰り返しやっていることをなぜ関数にしないのだ」と思うかもしれません。確かに例1を関数で書き換えるのであれば、例2が最もいい例なのかもしれません。しかし、消費税計算というのは非常によく使う計算ではありますが、alertを使って表示するということはそれほど多くありません。

関数には返り値（かえりち）というものが用意されていて、返り値を使うことで、関数の中で計算させた結果を、元のプログラムに戻してやることができます。元のプログラムはその返り値を使って、好きなことができるわけですね。たとえば、返り値を積算していけば、合計値を計算することができたりします。返り値をうまくつかうことで、関数の機能をシンプルにして、関数の再利用性をあげることもできるのです。

このように関数は、すべてをひとつにまとめるのではなく、本当に繰り返しが多く、まとめるべき手続きをまとめるのも、関数の利用価値を高めるポイントです。

でも、やっぱりこの際、alertも関数でやっちゃいたいよ！と思うこともありますよね。
次の例はどうでしょうか。

例4

//↓ここで関数定義！
function taxAndReturn( str ){
	str = Math.floor( str * 1.05 );
	return str;
}
function taxAndAlert( str ){
	alert( taxAndReturn( str ) );
}

//↓ここから実行文
var str_1 = 250;
taxAndAlert( str_1 );

var str_2 = 500;
taxAndAlert( str_2 );

例4では、関数を二つ作りました。関数の中から関数を呼び出しています。そう、消費税計算をする関数と、その関数を呼び出してalertする関数の二つを作ったわけです。こうすれば、消費税計算に限定することで利用価値をあげた関数の価値をそのままに、alertを呼び出すという手続きも再利用できるようになったわけです。

・繰り返しを関数にすることで、プログラムの可読性があがる。何度も同じことを書かなくていい。
・繰り返しを関数にすることで、プログラムを後日改修するときにラクになる。

というところがポイントで、

・関数はプログラム全体を見渡して、関数の内容はシンプルに。
・関数をいくつかつくり、関数と関数を関連させていくことでさらに便利に。

ここが関数の運用・設計において重要な点です。

個人的には、関数は、プログラミングを嫌いにならないためのひとつの道具でもあると思います。何度も同じことして「うがぁっ！！！」みたいなストレスが一番人間にとってよくないと思うからです。関数。頑張って覚えましょう。

私は、職業プログラミングをPerlからはじめたのですが、Perlにはswitchがない。その影響からか他の言語を書くときもめったにswitchは使いません。要するに使わなくても困りません！これ結論。（笑

まぁそれじゃだめなので、色々例示してみましょう。

意味としてはelse ifの構文とほとんど一緒ではあるのですが。。。。以下JSで書きます。

例1：

var i = 1;
if( i == 0 ){
    document.write( '0だよ！' );
}
else if( i == 1 ){
    document.write( '1だよ！' );
}
else if( i == 2 ){
    document.write( '2だよ！' );
}
else{
    document.write( '0から2以外だよ！' );
}

例2：

var i = 1;
switch( i ){

    case 0 :
        document.write( '0だよ！' );
        break;

    case 1 :
        document.write( '1だよ！' );
        break;

    case 2 :
        document.write( '2だよ！' );
        break;

    default :
        document.write( '0から2以外だよ！' );

}

例2は例1をswitch文で書き換えたものです。

結果はどちらも「1だよ！」と表示されます。

switchは基本的には、判定する変数がひとつの複数条件分岐に使います。

「break」はブロックを抜けろという意味の命令文。ブロックとはものすごくざっくり言うと「{」と「}」に囲まれた部分。switch構文の中に書けば、switch構文のところを抜けろという意味になります。

これを踏まえて、以下を。

例3：

var i = 1;
switch( i ){

    case 0 :
        document.write( '0だよ！' );

    case 1 :
        document.write( '1だよ！' );

    case 2 :
        document.write( '2だよ！' );

    default :
        document.write( '0から2以外だよ！' );

}

例3は例2から「break;」を取り払った内容です。

これを実行すると結果出力は「1だよ2だよ0から2以外だよ！」になるはずです。

ここがswitch文の特徴のひとつです。
else if構文では、条件にあったところだけを実行して、その後のブロックは無視されます。
switch構文では、条件にあったところ以降（breakが出てくるまで）すべてのステートメントを実行してしまいます。

例4：

var i = 1;
switch( i ){

    case 0 :
    case 1 :
        document.write( '0か1だよ！' );
        break;

    case 2 :
        document.write( '2だよ！' );
        break;

    default :
        document.write( '0から2以外だよ！' );

}

この場合、結果は「0か1だよ！」になるはず。まぁ当たり前。で「var i = 1;」を「var i = 0;」にしても結果は同じく「0か1だよ！」になります。
switch構文は、条件に合致したところ以下、break;が出てくるまで実行し続けます。
上記の例なら、「iが0だったとき」にbreakが用意されていないので、その下の「iが1だったとき」のステートメントが実行され、その中にbreakがあるので、そこでswitch文を抜けます。

つまり意味としては
「iが0だったとき」または「iが1だったとき」
という意味になるんですね。

例5

var i = 0;
if( (i == 0) || (i == 1) ){
    document.write( '0か1だよ！' );
}
else if( i == 2 ){
    document.write( '2だよ！' );
}
else{
    document.write( '0から2以外だよ！' );
}

例4をif/else if構文で書き換えるとこんな感じ。「または」の意味を「||」でつないでいるのが分かります。例5の場合、「または」の条件が2つなのでまだマシですけど、これが3つ4つになると鬱陶しいですよね？

要するに可読性が上がるというわけですな。（案外これ重要）
どこのサイトか忘れましたけど、JSでswitch使ったときと、else ifを使ったときでどっちが早いかということを実験してたところがありました。switch構文を使ったほうが早いということだったのは覚えています。

var array = new Array();
array[0] = false;
array[1] = false;
array[2] = true;
array[3] = false;
array[4] = false;

switch( true ){

    case array[0]:
        document.write( '0がTRUE!' );
        break;

    case array[1]:
        document.write( '1がTRUE!' );
        break;

    case array[2]:
        document.write( '2がTRUE!' );
        break;

    case array[3]:
        document.write( '3がTRUE!' );
        break;

    case array[4]:
        document.write( '4がTRUE!' );
        break;

    default:
        document.write( 'どれもTRUEじゃなかった(T_T)' );
}

条件にtrueを渡しておいて、caseに出てくる変数のどれがtrueかを判定する。
上記例の場合は、true|falseですが、数値とか文字列もいけるはず。

多少パフォーマンスを犠牲にしてますが、可読性はあがるのでは。と。。。

あまり使いどころの説明にはならなかったなこの記事･･･。反省。

環境によりVC++2008ランタイムが必要です。

インストールしてみて動作しないということであれば、
ランタイムをインストールしてみてください。

ランタイムはマイクロソフトサイトより
http://www.microsoft.com/downloads/details.aspx?familyid=A5C84275-3B97-4AB7-A40D-3802B2AF5FC2&displaylang=ja
こちらからダウンロードしてください。

だが、Lighbox2をSSL通信領域で使うと、

ブラウザ界を代表する困ったちゃんIEでセキュリティ警告が出る。

SSL通信になってない項目がページの中にあるよ。っていう警告なんだけど、

いくら調べてもそんなのページの中にない(>_<)
何が原因なのかさっぱりで、丸二日悩んだ・・・。Lightboxが悪いのか、IEが悪いのか。

で、最終的に、Lightboxディレクトリ中「/css/lightbox.css」に原因があることが判明。
13行目の記述。

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }

「background-image: url(data:image/gif;base64,AAAA);」
↑どうやらこれが問題らしい。。。見慣れない記述だ。
おそらく、BASE64エンコードしたときに値が「AAAA」となる、Content-typeが「image/gif」のデータを背景として読み込んでいる様子。

だったら、こういうファイルを実際につくればいいのでは。
ってことで、そのファイルをまずPerlで作る。

#!/usr/bin/perl -w

use strict;
use MIME::Base64;

my $fh;
open( $fh,'> hover.gif') || die("だめだった...orz\\n");
print $fh decode_base64('AAAA');
close( $fh );

print "できた！\\n";

まあこんな感じ。適当で申し訳ない(^-^;

それで、このスクリプトで作った「hover.gif」を、
lighbox内のディレクトリ「images」へアップロードし、
「/css/lightbox.css」の13行目を

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(../images/hover.gif); /* Trick IE into showing hover */ display: block; }

に変更したら、警告は出なくなった。

今回は、一応CSSに記述されている内容にしたがって改造したけど、
そもそもBASE64にしたとき「AAAA」なGIF画像なんて意味があるわけがないので、
もしかしたら、そんな画像をわざわざ作らなくても、何か適当なGIFを背景に指定してやればよかったのかも。

とか書いていると、

「prototype.jsマンセーな人か？｝
という突っ込みを受けそうですが、
否定はしません。
jQueryよりprototype.jsが好きです。
HTML制作をする上で、使いやすいのは多分圧倒的にjQueryなんだと思いますが、
いかにもjavascriptを拡張したっぽいprototype.jsのが親しみを感じるのです。個人的に。

閑話休題・・・いや、、、本題へ。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js"></script>
<script type="text/javascript" src="dragdrop.js"></script>

うえの二つは、script.aculo.usのベースライブラリ。
最後のひとつは、フロートできる要素を作ったり、ドロップできる要素をつくったりしたいときに呼び出すライブラリです。

script.aculo.usのダウンロードはこちらから。

<div id="float">これをフロート</div>

当たり前ですが、IDはページ内でユニークなものを設定しましょう。

<script type="text/javascript">
	new Draggable('float');
</script>

↑これだけです。引数には、フロートしたい要素のIDを指定します。

まぁ、普通は、onloadで呼び出す関数などに入れておいて、
ページ読み込み完了時 にこの命令が有効になるようにしたほうがいいので、
実際は、

<script type="text/javascript">
	function loadFunction(){
		new Draggable('float');
	}
</script>

↑JSソースにはこのように書いておき、

<body onload="loadFunction();">

↑<body>
タグにこのようにonload属性をつけて、関数を呼び出すのが筋でしょうか。

onload属性を使うのがかっちょわりぃなぁという人もいると思いますが、
ソース書くのが面倒なので、自分で考えて書いてください。

色々ゴニョゴニョしてやれば、擬似ウィンドウもできますから、自分専用の擬似ウインドウライブラリを作っておくと何かと便利だと思ったり。

<script type="text/javascript">
new Draggable(
	'float',
    	{
        		ghosting : true,//ゴーストを表示させるか？ true|false
                revert : true,//移動後元の位置に戻すか？ true|false
                starteffect: function() {//ドラッグ開始時によばれる関数
                },
                endeffect: function() {//ドラッグ終了時に呼ばれる関数
                }
         }
);
</script>

だいたいこんな感じです。

ほかにも沢山オプションがありますし、
フロート指定した要素に「onDrag」（ドラッグ開始のとき）などの、
イベントハンドラが追加されます。
詳しくは公式ページをご覧下さい。

handleというオプションを使うとD&Dできるようになるらしいですが、
未確認のため、今回は記事には書きません。

私もPHP使う人間だが、
PHPだけを利用するのはあまりよくないと思っている。
個人的には、PHPはプログラミング言語というよりは、
ほかの言語での勉強や経験を、
実践の場で簡単にフィードバックできる「ツール」くらいの感覚で利用している。
その辺の議論は、ググるといっぱいでてくるので、ここまで。

「ツール」という言葉を出したとおり、
PHPは、良くも悪くもWEBで利用するには
とても便利な便利な関数がそろえられている。

この関数をJavascriptへユーザー定義関数として実装してしまおう！
というのが「PHP.js」です。

http://kevin.vanzonneveld.net/techblog/article/phpjs_licensing/

関数別に説明ページとソースがある。

すべての関数をまとめたJSファイルをダウンロードもできるようだが、
ほかのJSライブラリと重複する機能も多々あるので、
関数別にソースを拝借して、利用したほうがよさそうだ。

個人的にmd5()、file_get_contents(),basename(),dirname()あたりを良く使いそうな予感。

jQueryの場合は、
http://coliss.com/articles/build-websites/operation/javascript/296.html
↑こちらが良さげです。
（さまざまなエフェクトが用意されているjQueryに標準で用意されていないのが意外でした。）

あ、そうそう、scriptaculous.jsのダウンロードはこちらで、、、
http://script.aculo.us/

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>

↑まずはライブラリをHTMLにロードしてやらないことにはお話にならないので、
ロードしましょう。

<div id="scrollToID"></div>

とか

<a name="scrollToID" id="scrollToID"></a>

とか。

とにかくエレメントがあればブロック要素だろうがアンカーだろうがスクロールしてくれるみたいです。
便利。

<script type="text/javascript">
function _scrollTo( id ){
    new Effect.ScrollTo(id);

}
</script>

たったこれだけ。

new Effect.ScrollTo(スクロールさせたいエレメントのID）;

↑そう、たったこれだけなのだ。

上記例では、第二引数は省略してあるけれど、
第二引数でオプションを指定して、スクロールする時間を変えたり、スクロール完了後のコールバック関数を指定できたりするらしい。めちゃ便利。詳しくはこちらをご覧下され。

<a href="javascript:_scrollTo('scrollToID');">クリックしてね☆</a>

リンクでやるならこんな感じね。
アンカーへジャンプするのの代わりに使うとかっちょいいサイトになるんじゃないかな。
当然、ボタンでやるならonclick属性で関数を呼び出してあげましょう。

Element.scrollTo(スクロール先のエレメントID);

を使います。こちらは、よりアンカータグへのジャンプに似た動きをします。<a>タグを使ってアンカーへジャンプした場合、ジャンプ前のURLとジャンプ後のURLが、WEBブラウザの履歴に残ってしまい、エンドユーザーに迷惑をかけることが多々ありますが、この方法なら、そんなことはありません。

読んでも理屈が良く分からない・・・。うーむ・・・。

が、とりあえず動作は満足。ありがとうございます。

名古屋のWEB開発業者さん「音生（ねお）」さんが、
スクロール専用のライブラリをリリースしてらっしゃいます。
ほかのライブラリと競合しないことがすばらしい。

scriptaculous.jsのスクロールを数日試してみましたが、
バグなのか仕様なのか、環境によって動作が？？？？なところが沢山ありました。
こちらのライブラリのがよさそうです。
おかしな動作がないわけではないですが、
ページのつくり方、スクリプトの書き方でほとんど改善できました。
ちなみにライセンスはMITなので、使いやすいです。