JavaScriptでのDIV間のスクロール

締切済

質問者：yamikurock
質問日時：2012/03/16 00:23
回答数：2件

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座標に移動させるような関数を実装すれば良いと考えています。
ですが、どのような実装をすれば良いか、試行錯誤していますがうまくいきません。
どなたかアドバイスをいただけるととてもうれしいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： taloo
回答日時：2012/03/16 14:39

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

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

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

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

- 0
- 件

通報する

この回答へのお礼

サンプルコード、ありがとうございます。とても参考になりました。
こちらで動作を確認したところ、うまく動作しました。（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の要素インデックス（１～）