• 締切済み

表示時にdiv要素のスクロール位置を指定したい

上部にヘッダー、左にメニュー、右にコンテンツ、下部にフッターという、2カラムのHTMLなのですが、左右のdiv要素にoverflowでスクロールをそれぞれ付けています。 問題なのは、この左側のメニューで、サイト内リンクをクリックすると新しくリンク先ページが開くので、当然スクロール値は0になります。 後方のボタンの場合、どのボタンを押したのかわからなくなってしまいます。 ということで、javascriptでスクロールの位置を調整したいのです。 私は初心者でして、見よう見まねで下記のように書いてみたのですが、スクロール値は0のままです。 根本的に間違っているのかすら解らずで、ご教授願いたいと思い投稿させて頂きました。 宜しくお願いいたします。 window.onload = function(){ sub_scroll.scrollTo('se'); } ※sub_scrollは左のdiv要素のidです。 seは先頭にしたい箇所のidです。

  • sb-k
  • お礼率100% (1/1)

みんなの回答

noname#137826
noname#137826
回答No.1

何かライブラリを使われてます? もし使われているのであれば、それをお書きになれば、そのライブラリに詳しい方からの回答が得られるかもしれません。 何も使われていないということであれば、根本的に間違っているでしょうね・・・^^; scrollToはelementのメソッドではなくwindowのメソッドです。 そして、scrollToの引数はidではなく座標です。 正しくは、 window.scrollTo(x,y); として、x, y にはseというidを持つ要素の座標を入れます。 座標の取得の仕方はブラウザ毎に違いがあります。 offsetTop, offsetLeft, offsetParent あたりをキーワードにして検索してみてください。

sb-k
質問者

お礼

お返事有難うございます! ライブラリが解らないのですが、たぶん使ってないです。 あれから試行錯誤して、なんとか座標指定でのスクロールができるようになりました。 window.onload = function(){ document.getElementById('sub_scroll').scrollTop = 500; } これをscrollTo(x,y)に変えると動きませんでした。 scrollToはwindowで、scrollTopはelementのメソッドっていうことでしょうか。 本来ならボタンを押す前のスクロール値を取得して、次のページでその座標にスクロールさせたいとこですが、おそらくクッキーかCGIか、記憶させる媒体が必要ですよね? 初心者にはハードルが高そうです。 上記の方法でも、操作性が良くないですので、結局iframeを使うことにしました^^; また改めて勉強しなおしたいと思います。 ありがとうございました。

関連するQ&A

  • divでスクロールの位置を記憶するには?

    始めまして。よろしくお願いします。 ブログのトップページがdivで2つに分かれています。 左側はメニュー画面で非常に縦長になっていてスクロールして表示しています。 メニュー画面のリンクをクリックするとメニュー画面のスクロールバーが一番上まで言ってしまって困っています。 リンクをクリックしてもスクロールバーの位置を変えない良い方法はないでしょうか? どなたかよろしくお願いします。

  • 指定要素をスクロール時に非表示

    JSで、divで囲ったある指定要素をスクロールしたら非表示にしたいのですが、 当方jsにまったく疎く、書き方がわかりません。 どなたかお助けいただけますと助かります。 サンプルなのですが、HTMLファイルのコードは以下になります。 <div id="subNav"> <ul class="fixed"> <li><a href="#">A</a></li> <li><a href="#">B</a></li> <li><a href="#">C</a></li> </ul> </div>

  • CSSだけで、テーブルにスクロールバーを表示させたいのですが…

    CSSを使い、テーブルにスクロールバーを表示させたいのですが <div style="height:60px; width:300px; overflow-y:scroll;"> <table border=1 width=300> : </table> </div> 上記の方法だと確かにスクロールバーは表示されるのですが、出来ればDIVを使わずに、作っておいたCSSを適用するだけで、テーブルにスクロールバーを表示させることは可能でしょうか? 出来れば、スクロールバーの色を変更して、横(X軸)のスクロールバーも消したいのですが… CSSで .scroll { overflow: scroll; visibility: visible; height: 100px; width: 140px; } とやってみたのですが、どうしてもスクロールバーが表示されません。何が足りないのか、もしくは根本から間違っているのかがわかりません。 ご存知の方教えて下さい。

    • ベストアンサー
    • HTML
  • 高さを指定せずに子divにスクロールバー

    お世話になっております。 内包されたdivにスクロールバーをつけたいのですが、高さを指定したくない場合はどうすれば良いでしょうか? 何がしたいのかと言えば 高さを規定した親div内に、問題の子divを入れます。 この子divにoverfllow:auto;を効かせて、中のテキストがはみ出した場合にスクロールバーを表示させたいです。 問題はその子divの上部にもほかの要素が加わり、その内容量が動的に変わるので、スクロールバーを出したいdivの高さを指定することができないのです。 高さを指定しなければ、overfllowでスクロールバーを出せません…。 cssで解決する方法は御座いますでしょうか? お詳しい方、何卒ご教授下さい。 だいぶ簡略化したものですが、下記コードがイメージに近いです。 汚いコードですが・・・ <style type="text/css"> <!-- *{margin:0;padding:0;} --> </style> <body> <div style="width:500px;height:150px;border:1px solid #555;margin:10px;"> <p style="width:50px;height:150px;float:left;background:#ccc;">ナビ。float:leftしてます。</p> <div style="width:450px;float:left;"> <p>ここに文章や画像・リストがきます。高さはページごとに変わります。</p> <div style="border:1px solid #aaf;overfllow:scroll;">子divです。わかりやすいよう、overfllowはscrollにしてあります。<br /> (「親divの高さ」-「他の要素の高さ」)<「本文の量」のとき、スクロールバーを表示させたいです。<br /> 高さを規定すべきですが、↑要素の内容量がページごとに変わるため、難しいです。<br /> cssのみで解決することは可能でしょうか?無理であれば、javascript等でも構いません。<br /> 何卒宜しくお願い致します。<br /> 本文本文本文<br />本文本文本文<br />本文本文本文<br />本文本文本文<br /> </div> </div> </div> </body>

    • 締切済み
    • CSS
  • overflow: auto; 要素内をスムーススクロール

    はじめまして、よろしくお願い致します。 メニューとなるボタンをいくつか配置し、それぞれのボタン押下時に、 『overflow: auto;』の疑似フレームにて表示している要素内を スムースにスクロール移動させることは可能でしょうか。 (よくある「ページトップへ」で、ページ内リンクをスムースにスクロールさせる動きを、疑似フレームを対象に行いたいです。) 下記ページの「Section Scroller」のような方法も考えたのですが、 http://sandbox.leigeber.com/contentslider/slider.html スクロールバーが表示される仕様で実現できればと考えております。 分かりにくい説明で、サンプルコードも提示できない形での質問になりましたが、よろしくお願い致します。

  • CSS 段組で要素が表示されません

    いつもお世話になります。 今CSSで段組をしています。 #content{ width:910px; height:auto; } #content{ float:left; width:440px; padding-left:10px; padding-right:10px; } #menu{ float:right; width:440px; padding-right:10px; } で左右のボックスを作り、 それぞれににsubを作ってテキストや画像などの子要素を入れていきます。 htmlは <body> <div id="content"> <div id="main"> <div class="sub1"> </div> <div class="sub2"> </div> </div>  <div id="menu"> <div class="sub3"> </div> <div class="sub4"> </div>   <div class="sub5"> </div> <div class="sub6"> </div> </div> </div> </body> という具合です。子要素(sub)には高さ指定はしていません。 問題なのは、 firefoxでは子要素がきちんと表示されているのですが、 IE(6,7とも)右の2番目(sub4)の要素を表示せず、(飛ばされている感じ) safariでは右の4番目(sub6)の要素が右の1番上の要素にかぶって表示されます。 全体の高さとしては右側の段組の方が高さがあります。 実際にはそれぞれのsubにテーブルやテキスト、画像などが入っています。 何が原因でしょう?どなたかご教授ください。 質問に慣れていないので、もし補足が必要であればお願いします。

  • 指定位置に要素を追加する

    <script type="text/javascript"> function test(){ var hako2 = document.createElement('div'); hako1.innerHTML = "TEST2"; var lk2 = document.getElementById('link2'); var li2 = lk2.parentNode; li2.appendChild(hako2); } </script> </head> <body> <div><a href="1" id="link1">1</a></div> <div><a href="2" id="link2">2</a></div> <div><a href="3" id="link3">3</a></div> <input type="button" onclick="test()" value="test"> </body> みたいなイメージなのですが、いかんせんスマートじゃありません できれば<div>で<a>を囲うのをやめたいのです。 ターゲットになる<a>の位置は固定ではなく前後に他の要素が入ることもあります <a href="2" id="link2">2</a>の次に<div>TEST2</div>を生成できればどんなのでも?いいのですが、何かいいやり方ありませんか?

  • スクロール付きのdivタグを作成するには

    縦スクロール付きのdivタグを作成するにはどうすればよろしいでしょうか。 下記のコードでやってみたのですが、うまくいきません。何が悪いのでしょうか。 var tarobj = object; var ele = document.createElement("div"); ele.setAttribute("overflow-y","scroll;"); ele.setAttribute("width", "100px"); ele.setAttribute("height", "25px"); ele.innerHTML = strobj; tarobj.appendChild(ele);

  • divのheight指定で画面一杯に表示したい

    よろしくお願い致します。 <div>の<height>を100%に指定して、 タブレット等での表示時、縦でも横でも画面一杯に 表示させたいと考えています。 とりあえず css で以下は宣言済みです。  html, body {   height: 100%;   margin: 0px;   padding: 0px;  } 親子構造としては以下を想定しています(いくらか簡略化しています) <html>  <body>   <div id="H" style="height:60px;">    (1)ここにヘッダー的なもの   </div>   <div id="B" style="height:100%; overflow: auto;">    (2)この部分を縦一杯にしたい   </div>  </body> </html> (2)の部分にはjavascriptでサーバから取得した XMLのデータを埋め込んでおります。 その際、選択行の色付け等を行いたかった為、 大枠を<div>でくくり、その中に<table>で表組みしています。 最終的な構造は以下のようになっているはずです。  <div id="B" style="height:100%; overflow: auto;">   <div id="rdiv1"><table id="rtbl1"><tr><td ・・・ /td></tr></table></div>   <div id="rdiv2"><table id="rtbl2"><tr><td ・・・ /td></tr></table></div>   <div id="rdiv3"><table id="rtbl3"><tr><td ・・・ /td></tr></table></div>   ・・・  </div> 行ごとの<div>や、その中の<table>でも height: 100%; は指定しています。 また、1行あたりの高さは<td style="height: 40px;">と指定しています。 (rowspanを使ってのぶち抜きを行っているため) html と body に height:100%; を指定しているので、 予想ではヘッダー用のdivが指定の高さで表示され、 次のdivが残りの高さ分一杯に表示。 その中のデータは overflow:auto; でスクロールできる。 と考えていたのですが、実際はjavascriptで埋め込んだdiv、 及びtableの高さまで伸びてしまい画面上を大きくはみ出してしまいます。 (divのoverflowが全く機能しません) 100%ではなく 500px としてみたところ、 そのサイズに収まってスクロールできました。 (縦一杯ではありませんがdivのoverflowは機能しました) 何とか height 100% を実現して、 divのスクロールバーのみでの表示を行いたいのですが、 何か指定が足りないのでしょうか?

    • ベストアンサー
    • CSS
  • ボックス内スクロール位置の指定

    Web画面の質問です。 HTMLでのWeb画面内にベース画面の上にポップアップのような形で、position: absolute; で描画された擬似的なウィンドウがあり、 その擬似ウィンドウ内にはナビゲーション(メニューボタン)とそれに付随するコンテンツがあります。 ※以下、擬似ウィンドウ(ポップアップ)内の大まかな構成図 [ボタン1] [ボタン2] [ボタン3] [ボタン4] ┏━━━━━┓ ┃コンテンツ1┃ ┃コンテンツ2┃←heightが固定値のdivボックス(overflow: auto; でスクロールバー発生) ┃コンテンツ3┃  仮にボックスAとする ┃コンテンツ4┃ ┗━━━━━┛ ボタン1を押すと、それに対応したコンテンツ1へ。ボタン2を押すとコンテンツ2へ、ページ内遷移のような構造にしたく、 ただし単純に各ボタンのアンカー先をコンテンツのid名のような形でページ内遷移を作ると、画面全体が動いてしまいますので、 ベースは動かさず、コンテンツを包含している「ボックスA」のスクロールバーのみを動かしたく思います。 JS側で(JQuery使用)、ボタン1を押したらボックスA.scrollTopにコンテンツ1.position().topの値を入れて処理しようと思ったのですが、スクロールバーが微妙にずれてしまいます。(綺麗にコンテンツ1の上端にスクロールしない) 恐らく親のボックスがposition:absoluteでやってるので計算がずれてる?とかも考えたのですが、対応策がよくわからないため、皆様のお知恵をお借りしたく書き込ませていただきました。 分かるかたいらっしゃいましたらご助言お願い致します。

専門家に質問してみよう