overflow:scrollの要素内リンクの方法を探しています
- overflow:scrollを指定した要素内での要素内リンクの方法を探しています。
- overlow:scrollを指定した要素の外に、overflow:scrollを指定した要素をコントロールするリンクを設置し、そのリンクをクリックすると、overflow:scrollを指定した要素内の指定位置までスクロールする方法を知りたいです。
- 参考にあげさせていただいたサイトの方法でも構いませんが、もっと簡単な方法がある場合、JavascriptやJQueryを使った方法を教えてください。
- ベストアンサー
overflow:scrollの要素内リンクの質問
overflow:scrollを指定した要素内での要素内リンク（アンカーリンク？）の方法を探しています。 参考： http://solidstate.jp/ContentsDisplay/tabBox/script_144.html イメージとしては、、overlow:scrollを指定した要素の外に、overflow:scrollを指定した要素をコントロールするリンクがあって、そのリンクをクリックすると、overflow:scrollを指定した要素内の指定位置まで移動するようなイメージです。 参考にあげさせていただいたサイトのものでも良いのですが、他にこういったことを実現するJavascriptやJQueryをご存知の方がいらっしゃいましたら教えてください。 よろしくお願いします。
- yuri805
- お礼率39% (13/33)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんばんは。 単純に・・・、 <html> <head> <title>TEST PAGE</title> </head> <body> <h1>TEST</h1> <a href="#abc">click</a> <div style="overflow:scroll;height:200px;"> AAAAAAAAAAAAAA <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <br> <a id="abc"></a> BBBBBBBBBBBBBBBBBBBBBBBB </div> </body> </html> これで、clickというリンクを押せば、DIV内の<a id="abc"></a>に行きますが・・・。 こんなんじゃ駄目？
関連するQ&A
- リンク先でjavascript
javascript初心者です。 ファイル内に、縦に長くて、overflow: auto;の指定をしてあるdiv要素（内容は読物です）がありまして、そのファイルではdiv要素の中で4つのアンカーポイントにビューンとスクロールするjavascriptを設置してます。 1つのリンク元ファイルから、４パターンのa hrefリンクをはり、リンク先ファイルのjavascriptを動かす（ページを読み込んですぐ４パターンのアンカーポイントにビューンと飛んでいく）ような指令って、どうやるのでしょうか。
- 締切済み
- JavaScript
- リンク先を変えたいのですが
scrolltopcontrol.jsのjQueryを使って トップの位置に戻るページを作りましたが クリックした時のリンク先を変えたいのですが どこをどのように書き換えればよいのでしょうか http://から始まる任意のページにリンクするようにしたいのです （ページ内ではなく） どなたかお教えいただけますでしょうか 何卒宜しくお願い致します -------------------- 以下のサイトを参考にして作業をしています 【ページのトップに戻る】 http://iuser.jp/webjin/archives/2009/11/jquery-scroll-to-top-control.html 宜しくお願い致します
- 締切済み
- JavaScript
- FLASH → jquery？のScroll
http://tv.jp.msn.com/ ここのHPのメニューバーの下にある、メインっぽい画像の下部にグルグル回っている部分があります。 jquery？のScrollみたいな感じですが、中央にくると画像が大きくなるみたいな・・・ これをFLASHではなく、Javascriptで作成することは可能でしょうか？参考になるHPなども教えていただけるとありがたいです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 表示時にdiv要素のスクロール位置を指定したい
上部にヘッダー、左にメニュー、右にコンテンツ、下部にフッターという、２カラムのHTMLなのですが、左右のdiv要素にoverflowでスクロールをそれぞれ付けています。 問題なのは、この左側のメニューで、サイト内リンクをクリックすると新しくリンク先ページが開くので、当然スクロール値は０になります。 後方のボタンの場合、どのボタンを押したのかわからなくなってしまいます。 ということで、javascriptでスクロールの位置を調整したいのです。 私は初心者でして、見よう見まねで下記のように書いてみたのですが、スクロール値は０のままです。 根本的に間違っているのかすら解らずで、ご教授願いたいと思い投稿させて頂きました。 宜しくお願いいたします。 window.onload = function(){ sub_scroll.scrollTo('se'); } ※sub_scrollは左のdiv要素のidです。 seは先頭にしたい箇所のidです。
- 締切済み
- JavaScript
- jQuery:要素の位置情報の保持について
jQuery:要素の位置情報の保持について 現在、IE8,jQuery 1.4.1,jQuery UI 1.8.1の環境でWebアプリケーションの作成を行っています。 画像ファイルを（マウスの）ドラッグで移動させ、ドロップした後の位置情報を保持し、再びそのWebアプリケーションを起動させた時に画像ファイルが移動した後の位置のままというようにしたいと考えています。 このようなことは可能でしょうか？ もし可能な場合、何か参考となるコードやキーワードを教えていただけないでしょうか？ 画像ファイルを移動させる事までは確認しましたので載せておきます。 <html> <head> <title>ドラッグで要素移動title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link rel="stylesheet" href="style.css" type="text/css" /> <link rel="stylesheet" href="../Scripts/jquery-ui-1.8.1.custom.css" type="text/css" /> <script type="text/javascript" src="../Scripts/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="../Scripts/jquery-ui-1.8.1.custom.min.js"></script> <script type="text/javascript" language="JavaScript"><!-- $(function () { $("img.mover").draggable({ opacity: 0.5, cursor: "move", grid: [20, 20], stop: function () { var x = $(this).css("left");//この値をどこかで保持しておきたい var y = $(this).css("top");//この値をどこかで保持しておきたい alert("左：" + x + "、上：" + y ); } }); }); //--></script> </head> <body> <img src="pic1.jpg" class="mover" alt="test" /> <img src="pic2.jpg" class="mover" alt="test" /> <img src="pic3.jpg" class="mover" alt="test" /> </body> </html>
- 締切済み
- AJAX
- アンカータグをクリックして色を変える方法（リンク数変動ある場合）
はじめまして。 javascriptを使って、別ページにあるアンカータグにリンクしたときに、テキスト等の色を変える方法でご教授いただきたいことがあります。 同じ当該掲示板にて投稿されていた記述を参考にすると、 http://oshiete1.goo.ne.jp/qa382742.html アンカー数（リンク数）をあらかじめ決めておく必要があるのですが、 これを”アンカー数”に関係なく実行する記述がわからず、 投稿させていただきました。 複数のhtmlページにこれを実現したいのですが、 htmlページによりアンカー数が様々であり、 htmlページ数も１００くらいあって、ひとつずつアンカー数を数えて設定するより一つのjava scriptファイルで実現できないでしょうか。 ご教授宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
- 「overflow: hidden」ペー ジ内リンクで画面がずれてしまう
<body>に「overflow: hidden」を指定してスクロールバーを非表示にし、 領域<div class="scroll">内のみスクロールさせる「擬似フレーム」的（？）なものをつくりました。 そして、<div class="scroll">の中をクリックで移動するためのアンカーリンクを設けました。 ブラウザのウィンドウサイズが十分に大きい場合は問題ないのですが、 ウィンドウサイズが小さい（本来なら縦スクロールが必要になるサイズ）場合、 リンククリックで画面内が上にピッとずれてしまいます。 <body>に「position: fixed」を指定すればFirefox等では解決しますが、IEではダメです。 このズレを防ぐ方法はないものでしょうか。 以下サンプルソースです。 <html> <head> <style type="text/css"> <!-- body { overflow: hidden; /*---↓Firefox等でOK、IEはダメ------- position: fixed; top: 0px; -----------------------------------*/ } .scroll { overflow: auto; height: 200px; background: #CCCCCC; padding: 10px; } --> </style> </head> <body> <h1>ページ内リンクによる「scroll」と「overflow: hidden」 </h1> <ul> <li><a href="#topic1">その1＞＞ </a></li> <li><a href="#topic2">その2＞＞ </a></li> <li><a href="#topic3">その3＞＞ </a></li> </ul> <div class="scroll"> <div id="topic1"> <h2>その1</h2> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> <div id="topic2"> <h2>その2</h2> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> <div id="topic3"> <h2>その3</h2> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> <p>内容</p> </div> </div> </body> </html>
- 締切済み
- HTML
- overflow: auto; 要素内をスムーススクロール
はじめまして、よろしくお願い致します。 メニューとなるボタンをいくつか配置し、それぞれのボタン押下時に、 『overflow: auto;』の疑似フレームにて表示している要素内を スムースにスクロール移動させることは可能でしょうか。 （よくある「ページトップへ」で、ページ内リンクをスムースにスクロールさせる動きを、疑似フレームを対象に行いたいです。） 下記ページの「Section Scroller」のような方法も考えたのですが、 http://sandbox.leigeber.com/contentslider/slider.html スクロールバーが表示される仕様で実現できればと考えております。 分かりにくい説明で、サンプルコードも提示できない形での質問になりましたが、よろしくお願い致します。
- ベストアンサー
- JavaScript
- 子要素のスクロールが親要素に伝播しないようにしたい
スクロールバーを持つ子要素 と その親要素であるwindow があり、 子要素のスクロール位置が一番上にある状態で、上に向かってホイールスクロールすると親要素windowのスクロールバーが動いてしまいます。 また、その逆に 子要素のスクロール位置が一番下にある状態で、下に向かってホイールスクロールすると親要素windowのスクロールバーが動いてしまいます。 この挙動をやめたいのですがどのようにすればよいでしょうか。 具体的にはFacebookの右上（外側のサイドバーの上）にあるフレンドのアクティビティを表示している領域の様な動作にしたいです。 下記コードでは実現出来ませんでした。 $("#sample").on('scroll mousewheel', function(event) { event.stopPropagation(); }); ライブラリはjqueryを使っています。 よろしくお願いします。
- 締切済み
- JavaScript
- jqueryでのscript要素の書き出し
こんにちは。 ただいま、Jqueryとjavascriptの練習で、 ニコニコなどの動画サイトのURLをinput要素に入力すると動的にサムネイル画像を表示させるようなことにチャレンジしています。 躓いているのはニコニコの以下のURLなのですが、 http://www.nicovideo.jp/watch/sm6743695 このようなURLから”sm6743695”を抜き出し、javascriptで以下のようなスクリプトを生成しました。 <script type="text/javascript" src="http://ext.nicovideo.jp/thumb_watch/sm6743695?w=260&h=180"></script> この文字列が格納された変数scriptをJqueryにより画面に書き出すと、 $('display-movie').html(script); 上書きはされているようなのですが、動画を読み込みません。 書き込み前 <p id ="display-movie">movie（確認用文字列）</p> 書き込み後 <p id ="display-movie"></p> また、確認の為にスクリプトを直接HTMLに書いて再読み込みしてみると、動画は正しく表示されます。 スクリプト要素のsrcのリンクを直接ブラウザに入れてアクセスしてみると、スクリプトのソースらしきものは正しく読んでいるようです。 このような要素は、initのように・・何らかの方法で動作させないと作動しないものなのでしょうか。 雑多な質問で申し訳ありませんが、お気づきのことがありましたら教えて頂けますと幸いです。 宜しくお願い申し上げます。
- ベストアンサー
- JavaScript
