JavaScriptでのDIV間のスクロール

質問

JavaScriptの初心者です。
JavaScriptの実装方法について教えてください。

以下のようなhtmlがある場合に、JavaScriptの関数呼び出しによってbox間のスクロールをさせたいです。
例：yyyyyyyのboxで関数を呼ぶと、zzzzzzzzzzのboxまでスクロールする。

<div class="box">xxxxxxxxxxxxxxxxxxxxxxx</div>
<div class="box">yyyyyyyyyyyyyyyyyyyyyyy</div>
<div class="box">zzzzzzzzzzzzzzzzzzzzzzzzzz</div>

class名が同一である場合にこのような処理を行うためには、各boxの座標を取得しておき、現在表示しているboxの上下のtop座標に移動させるような関数を実装すれば良いと考えています。
ですが、どのような実装をすれば良いか、試行錯誤していますがうまくいきません。
どなたかアドバイスをいただけるととてもうれしいです。

回答No.2

神崎 渉瑠（@taloo）

boxの座標を取得して、element.scrollTopやwindow.scrollTo()でスクロールさせてください。

https://developer.mozilla.org/Ja/DOM/Element.getBoundingClientRect
http://msdn.microsoft.com/en-us/library/ms536433.aspx

function $(cname, idx){
return document.getElementsByClassName(cname)[idx];
}
$('box', 1).onclick=function(){
document.body.scrollTop=$('box',2).getBoundingClientRect().top;
}

未検証です。
互換性を考慮していませんが、メジャーなのの最新バージョンなら動くと思います。

お礼

サンプルコード、ありがとうございます。とても参考になりました。
こちらで動作を確認したところ、うまく動作しました。（Safari）

なお、頂いたコードですと、必ず2番目の該当classへ飛ぶようでしたので、
関数を呼び出す場所から要素インデックスを指定するように修正中です。
・・・まだ動いていませんので、これからデバッグしてみます。

修正中のコード。

function $(cname, idx){
return document.getElementsByClassName(cname)[idx];
}
function moveNext(x){
document.body.scrollTop=$('post_controls',x+1).getBoundingClientRect().top;
}

呼び出しは、テスト用に以下のように呼び出しています。
<a href="javascript:void(0)" onclick="moveNext(※);return false">link</a>
※boxの要素インデックス（１～）

回答No.1

lupin-333333

スクロールテクにクックの最初はマイクロソフトのＤＨＴＭＬから派生しています。

現在は、ＨＴＭＬ５で実現可能です。

http://search.yahoo.co.jp/search?b=1&n=10&ei=UTF-8&fr=ie8sc&p=%22HTML5%22+%26+%22%E3%82%B9%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%AB%22

http://kachibito.net/web-design/parallax-scroll-inspiration.html

http://www.ajike.co.jp/ajiblo/?p=1351

など検索によりリストされるサイトを参考にしましょうお。

ちょっと以前なら、JQueryですね。もう過去の遺物になりつつあります。マイクロソフトでも、JQueryに刺激され、カプセル化されたものを提供始めています。

http://msdn.microsoft.com/en-us/library/windows/apps/br211369.aspx
http://msdn.microsoft.com/en-us/library/windows/apps/br229576.aspx

http://msdn.microsoft.com/en-us/library/hh243643.aspx

"HTML5" & "anime" で検索されるカテゴリーです

http://search.yahoo.co.jp/search?b=1&n=10&ei=UTF-8&fr=ie8sc&p=%22HTML5%22+%26+%22anime%22
http://website.informer.com/terms/Html5_Anime_Websites

元祖

http://search.yahoo.co.jp/search?p=%22DHTML%22+%26+%22anime%22&aq=-1&oq=&ei=UTF-8&fr=ie8sc&n=10&x=wrt

http://ascii.jp/elem/000/000/589/589429/

お礼

情報、ありがとうございました。
直接知りたい情報ではありませんでしたが、今後の参考とさせて頂きます。