- ベストアンサー
Web画面のボックス内スクロール位置の指定方法
- HTMLでのWeb画面内にベース画面の上にポップアップのような形で、擬似ウィンドウがあります。
- 擬似ウィンドウ内のコンテンツは、ボタンを押すことで表示され、スクロールバーを動かしたい時はボックスAの位置を調整します。
- JSでJQueryを使用して、ボタンを押したらボックスAのscrollTopにコンテンツの位置を入れる処理を行いますが、微妙なずれが生じることがあります。対応策はまだ見つかっていません。
- pikarin774
- お礼率93% (31/33)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
jqueryのoffset計算がよくわからなかったので、素で作ってみました。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1");</script> <script type="text/javascript"> <!-- $(function(){ $("#navi input").click(function(){ var box = $("#box"); var target = $("#" + $(this).attr("value")); $(box).scrollTop(getOffset(target) - getOffset(box)); }); function getOffset(elm){ var e = elm.get(0); var top = e.offsetTop; e = e.offsetParent; while(e){ top += e.offsetTop; e = e.offsetParent; } return top; } }); //--> </script> <body> <div style="position:absolute; left:200px; top:200px;"> <div id="navi"> <input type="button" value="test1"> <input type="button" value="test2"> <input type="button" value="test3"> </div> <div id="box" style="width:300px; height:300px; overflow:auto;"> <div id="test1" style="height:400px; background-color:#fee;"> test1 </div> <div id="test2" style="height:600px; background-color:#efe;"> test2 </div> <div id="test3" style="height:300px; background-color:#eef;"> test3 </div> </div> </div> </body> </html>
お礼
お返事遅れまして申し訳ございません。 上記ソースを試したところ、こちらの意図した通りの挙動でした！ ありがとうございました！