ボックス内のscrollTo(x,y)の指定方法について
- ボックス内に記述したscrollTo(x,y)が正しく動作しない場合があります。
- scrollTo(x,y)を正しく使用するためには、対象の要素を正確に指定する必要があります。
- ボックス内のスクロール位置を指定するためには、ボックスのIDやクラスを使用して要素を特定することができます。
- ベストアンサー
ボックス内の scrollTo(x,y) について質問です。
ボックス内の scrollTo(x,y) について質問です。 スタイルシートで .text { overflow: auto ; width: 550px; height:400px; } というボックスを作り、その中の本文をスクロールで見られるようにしているのですが、 このボックス内のスクロール位置を上に移動するためにscrollTo(x,y)を設定したいです。 ボックス内に <a href="javascript:scrollTo(top)">トップへ</a> と記述し実行したところ、ボックス内のスクロール位置は戻らず ページ全体のスクロールがトップに移ります。 このscrollTo(x,y)の記述方法について 対象（ボックス内）を正しく指定する方法があれば教えていただきたいです。 素人質問で申し訳ありませんがかよろしくお願いいたします。
- tsdbk518
- お礼率71% (5/7)
- JavaScript
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
横スクロールもやるなら、 element.scrollLeft を使う 参考： https://developer.mozilla.org/en/DOM/element.scrollTop http://msdn.microsoft.com/en-us/library/ms534618%28VS.85%29.aspx スタイルシートで .text { overflow: auto ; width: 550px; height:400px; } <body> --------------- <div class="text"> 長いコンテンツ <br><span onclick="scrolltop(this);" style="text-decoration:underline;">トップへ</span> </div> ------------------ <script type="text/javascript"> function scrolltop(elm){ elm.parentNode.scrollTop = 0; elm.parentNode.scrollLeft = 0; } </script> <body> の意味
その他の回答 (3)
- yamada_g
- ベストアンサー率68% (258/374)
横からすみません。 >最後に表示される「トップへ」の部分がクリックできません。 リンクのようにマウスカーソルが変わらないので、そう思っただけなのではないですか？ 実際にクリックしてみれば、No.1・2さんのソースできちんと動きますよ。 <span onclick="scrolltop(this);" style="text-decoration:underline;cursor: pointer;">トップへ</span> などとしてみると分かりやすいかもしれませんね。
補足
おお！動きました！ ソースをコピーしてテキストの中身を入れて 確かめたところ動いたので、 私の入力ミスもあったようです。 お騒がせしました。 ありがとうございます！
- yyr446
- ベストアンサー率65% (870/1330)
「最後に表示される「トップへ」の部分がクリックできません」 解りませんね、あなたの書いたコードをここに投稿できませんか （投稿文字数制限ありますけど）
お礼
すいませんでした。 上のかたへの補足に入力した通り、 きちんと操作することができました。 私のミスです。 おかげさまで問題解決いたしました。 本当にありがとうございます！
- yyr446
- ベストアンサー率65% (870/1330)
<span onclick="scrolltop(this);" style="text-decoration:underline;">トップへ</span>> <script type="text/javascript"> function scrolltop(elm){ elm.parentNode.scrollTop = 0; } </script>
関連するQ&A
- フロートしたボックスのスクロールバー
メインのフロートボックスに垂直スクロールバーをつけたいのですが、 上手くいきません。 スタイルシートに （メインのボックス↓） .l_main { margin: 0px; padding: 0px; width: 600px; height: 550px; float: right; overflow:auto;(←スクロールバーの要素を記述） ｝ こう記述しているのですが、ページ内容によってものすごく縦長になったり、いらぬ余白が出来たり。 独学の上、CSSの参考サイトからコピペなどして適当にやっているので分かりません。よい方法を教えてください。
- 締切済み
- HTML
- 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
- スムーズにスクロールできるスプリクトが作動しません
初めて質問させていただきます。 ページ内にスタイルシートを使ってスクロールしても動かない案内板のようなボックスを作り、その中でページの上部に戻る際、スルスルとスクロールするjavascriptを入れたいのですが、うまく作動しません。 <script type="text/javascript" src="○○.js" charset="utf-8"></script> <STYLE type="text/css"> <!-- html{ height:100%; overflow:hidden; } body{ height:100%; margin:0px auto; } #sub{ width:100px; position:absolute; bottom: 0px; right: 0px; z-index:100; } div#main{ width:100%; height:100%; overflow:auto; } --> </STYLE> </HEAD> <BODY> <DIV id="sub"><A href="○○">あいうえお</A><BR><A href="○○">かきくけこ</A><BR><a href="#top">上へ</A></DIV> <DIV id="main"> <A name="top"></A><BR> ・・・略 </div> </body> 普通のbody内でリンクを指定すると、問題なくスプリクトが作動します。 なぜ、div内では作動しないのでしょうか？ いろいろ調べてみましたが、どうしても分からず、こうして質問させていただきました。 原因がわかる方がいらっしゃいましたら、どうか教えてくださいますようお願いいたします。
- ベストアンサー
- JavaScript
- CSSでpxと割合の共存
以下のような画面を作成しています。 画面を上下2つのボックスに分けて、上側を100pxにして、 下側を残りの領域にしたいのです。 具体的には以下のようなCSSです。 #head { position : absolute; left : 0; top : 0; margin : 0; padding : 0; height : 100px; width : 100%; overflow : hidden; background-color : #eeeeee; } #tail { position : absolute; left : 0; top : 100px; width : 100%; overflow : auto; } これだけでは、tail領域に入るモノによって、 左右スクロールの表示位置がおかしくなります。 上の領域も%で指定して、tailにheightを指定すれば、 うまくいくのは判っているのですが、上の領域をpxで 指定する必要があるためそれはできません。 また、Windowの大きさも変更されることを前提に しています。 なにか、良い方法は無いでしょうか？ よろしくお願いします。
- ベストアンサー
- CSS
- Dreamweaverでリストを作成するとボックスからずれてしまいます
DreamweaverCS3を使用してサイトを作成している初心者です。 AP divで作ったボックスの中にリストを作成したのですが、 何故か文字の部分がボックスから大幅にずれてしまいます。 CSS記述↓ #apDiv1 { position:absolute; left:57px; top:82px; width:150px; height:143px; z-index:12; background-color: #FFFFFF; } #apDiv1 li { list-style-type: none; background-color: #CCCCCC; color: #333333; display: block; width: 135px; padding-bottom: 4px; padding-top: 4px; margin-bottom: 1px; margin-left: 0px; margin-top: 0px; padding-left: 15px; } #apDiv1 li a:hover { background-color:#999999 } <body>内です↓ <div id="apDiv1"> <ul> <li class="style4"><a href="http://oshiete.goo.ne.jp/">あああ</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">いいい</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">ううう</a></li> <li class="style4"><a href="http://oshiete.goo.ne.jp/">えええ</a></li> </ul> </div> どうしたらボックスにピッタリ合わせる事ができるのでしょうか。 どうぞ宜しくお願い致します。
- ベストアンサー
- グラフィックソフト
- テキストボックスの表示
テキストボックスの表示 テキストボックスを２つ横に並べて表示したいのですが、 <html> <div style="border:thick solid;width:200;height:200;overflow:auto;"> <Table border="0" width="308" height="300" cellspacing="0" bgcolor="#ffffff"> <Tr><Td align="center" valign="top"> テキストＡ </Td></Tr> </Table></div> <div style="border:thick solid;width:200;height:200;overflow:auto;"> <Table border="0" width="200" height="200" cellspacing="0" bgcolor="#ffffff"> <Tr><Td align="center" valign="top"> テキストＢ </Td></Tr> </Table></div> </html> これで、記述をすると縦に二つ表示されます。 スタイルシートを使用しないと無理でしょうか？
- ベストアンサー
- HTML
- CSSでスクロールボックス
div要素を使ってスクロールボックスのようなものを作っているのですが、その中にa:hoverを使ったリンクがあり、このリンクにマウスカーソルを持ってくると、スクロールボックス自体が下の方に移動してしまいます。 Internet Explorerでだけこの現象が発生します。FirefoxやOperaでは問題ありません。 何か解決方法はないでしょうか。 一応以下にソースを載せます。縦方向のスクロールする行が多いほど、移動する量も大きくなります。 --- css --- div.test { width: 90%; height: 100px; border: 1px solid #003333; overflow: scroll; } a.test:link, a.test:visited { color: #000000; text-decoration: underline; } a.test:hover { color: #ffffff; background-color: #999999; text-decoration: none; } --- End --- --- html --- <div class="test"> <table class="test" align="center"> <tr> <th width="100px"><a class="test" href="test.html">Col1</a></th> <th width="100px"><a class="test" href="test.html">Col2</a></th> <th width="100px"><a class="test" href="test.html">Col3</a></th> <tr> <td nowrap>data1</td> <td nowrap>data2</td> <td nowrap>data3</td> </tr> 以下、同じようにあと10行程度追加 </table> </div>
- ベストアンサー
- CSS
- <div style="overflow">でこんなことは出来ませんか？
<div style="overflow: auto; height: **px;width:**px;"> というタグについて教えてください。 <div>で囲まれた内容が、height: **pxに満たない場合、 スクロールバーは出ませんが スペースはheight: **px分、空いてしまいます。 やりたいことは、<div>で囲む内容が height: **px未満の場合はスペースもあけず スクロールバーも出さず、overflow未指定の状態にする。 height: **pxの場合はheight: **pxで高さを固定して スクロールバーを出す。ということです。 何か良い方法はありませんでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- CSS目次開閉でチェックボックスが現れる
CSSで目次開閉を作成したのですが、左上に四角いチェックボックスが現れてしまいます。 このチェックボックスを消す方法はありますでしょうか。 HTML <div class="open-menu"> <input id="open-1" type="checkbox"> <label for="open-1">≡目次</label> <div class="open-menu-inside"> <ol class="numbering"> <li><a href="#1"> </a></li> <li><a href="#2"></a></li> <li><a href="#3"></a></li> </ol> </div> </div> CSS .open-menu input { display: none; } .open-menu label { width: 180px; color: #000000; font-size: 20px; line-height: 2; font-weight: bold; text-align: left; margin: 20px; box-shadow: 5px 5px 5px #aaa; padding: 20px; cursor: pointer; position: relative; display: block; } /* ここから追加 */ .open-menu label { border: 2px solid #ff0000; border-radius: 20px; } .open-menu label:hover { background: #ffb8b3; opacity: 0.5; } .open-menu label:after { position: absolute; right: 10px; top: 50%; -webkit-transform : translateY(-50%); transform : translateY(-50%); content: "［開く］"; } .open-menu input:checked ~ label::after { content: "［閉じる］"; } .open-menu div { height: 0; overflow: hidden; opacity: 0; transition: 0.3s; } .open-menu input:checked ~ div { height: auto; max-width: 80%; opacity: 1; padding: 20px; background: #ffeff9; border: 2px solid #ff95d5; box-shadow: 5px 5px 5px #aaa; border-radius: 20px; overflow: hidden; } .open-menu-inside { color: #333333; font-size: 15px; line-height: 2; } チェックボックスを消す方法があれば、教えていただきたいです。 よろしくお願いいたします。
- 締切済み
- CSS
- クロームとサファリでスクロールバーが表示されない
Macのグーグルクロームとサファリでスクロールバーを表示させる方法を教えて下さい。 ちなみにWindowsでは表示されていると思うのですが・・・ 下記のように、縦幅を指定し、その中で入り切らない文章を下にスクロールさせるようなページを作成したのですが、ブラウザによりスクロールバーが見えないとなると、人によっては下にまだ内容がある事に気づかないという事が起こってしまうのではと心配です。 #content { text-align: left; padding: 0px; width: 340px; height: 500px; float: left; margin: 0px; overflow-y: auto; overflow-x: hidden; } 何かやり方があれば是非教えて下さい。 宜しくお願いします。
- 締切済み
- CSS
お礼
ありがとうございます。 とても丁寧に記してもらって感謝いたします。 ただ、早速一つ目とこの回答の内容の通りに入力し、試してみたのですが 最後に表示される「トップへ」の部分がクリックできません。 「トップへ」と、テキストで表示されているだけのような感じになってしまいます。 私はjavascriptに関する知識はおろか、htmlの知識もギリギリなので 情けないのですが・・ どうすればよいかわからないです。 補足等頂けましたらありがたいです。