• 締切済み

HPをクリック時に指定箇所に飛ばす

ペライチの縦長サイトを作成しています。 そのサイトのURLをクリックした際に、ページ内の特定の高さに自動的に表示させる方法を探しています。 ページ内のコンテンツにて一つ目の括り方を<div class="base">、二番目のコンテンツを<div class="info">という形で、メニューをクリックするとそれぞれindex.html#base、index.html#infoという風に翔ぶようにしています。 そのサイトに初めて訪れる際に、index.htmlをクリックした人が、表示する段階で<div claas="info">の箇所にスクロールがいっているようにしたいのですが、どのようにすればいいのでしょうか。 分かりづらい説明で申し訳ございませんが、ご教授いただけますと幸いです。 どうぞよろしくお願いいたします。

  • CSS
  • 回答数2
  • ありがとう数1

みんなの回答

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

質問の意味がさっぱりわかりませんが、想像ですが・・ そのページを開いたとき、フォーカスが特定の要素に当たった状態にしたいということ?? 通常はページを開いたときは、ルートにフォーカスはありますが、タブでフォーカスが移動することを省略して・・ということ。 >ペライチの縦長サイトを作成しています。  サイトではなく「ページ」 >そのサイト【ページへ】のURL【リンク】をクリックし【て移動し】た際に、ページ内の特定の高さ【位置】に自動的に表示させる方法を探しています。 A:本来はページ内アンカーでよいはずです。   <a href="hoge.com/abc.html#AnchorName>ほげ</a> >ページ内のコンテンツにて一つ目の括り方を<div class="base">、二番目のコンテンツを<div class="info">という形で、メニューをクリックするとそれぞれindex.html#base、index.html#infoという風に翔ぶようにしています。  ということは、すでにページ内にはアンカーがあるのですから・・ >そのサイト【ページ】に初めて訪れる際に、index.htmlをクリックした人が、表示する段階で<div claas="info">の箇所にスクロール【フォーカス】がいっているようにしたいのですが、どのようにすればいいのでしょうか。  とても不親切ですのでそんな事はしません。  あくまで、目的を持っていく場合は#ですし、そうでない場合は最初から >そのサイト(ページ)へ移動したURL(リンク)をクリックした際に、ページ内の特定の高さに自動的に表示させる方法を探しています。  最初に戻りますが、ページ内アンカーを使用します。 [例] href = uri [CT]( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/links.html#adef-href )

  • tkf-
  • ベストアンサー率58% (821/1396)
回答No.1

<div class="info" id="info"> でどでしょ。 http://www.shoshinsha.com/hp/ref/html/a_name.html

関連するQ&A

  • jQuery 1つの要素を複数箇所に表示したい

    いつもこちらでお世話になっています。 jQuery初心者です。 また、お知恵を拝借したく、お願いします。 以下のようなHTMLがあります。 やりたい事は <div class="info">の中の要素全て(ul以下)を <div class="hoge">の中にも表示したいのです。 ですが、以下のスクリプトのように書くと、 今度は、<div class="info">の中の要素が表示されなくなり、 <div class="hoge">の中に表示されました。 <div class="info">の中の要素は 表示のままで、重複して<div class="hoge">の中に 表示させる方法ってありますか? ▼HTML ------------------- <div class="hoge"></div> ~別要素(省略)~ <div class="info">  <ul>   <li>項目1</li>   <li>項目2</li>  </ul> </div> ▼Script ------------------- var contents = $("div.info ul"); $("div.hoge").html(contents); ------------------- 多分、基本的な事なのかもですが、 1つの要素を重複して表示できる方法がありましたら 詳しい方、ご教授ください。 どうぞ宜しくお願いいたします。

    • ベストアンサー
    • AJAX
  • 表示時にdiv要素のスクロール位置を指定したい

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

  • PHP+smartyで文字化け

    PHP+smartyでサイトを作成し始めました。(以下URL) http://babyitem.info/ PHPファイル、テンプレート共に、文字コードはEUCで作成しています。 サーバーは、ロリポップをレンタルしています。 index.phpは以下の通りです。 ----------------------------------------------------------- <?php $contents_title="ベビーアイテム.info"; $tpl->assign("contents_title",$contents_title); $tpl->display("babyitem.tpl"); ?> ----------------------------------------------------------- babyitem.tpl(上記サイト左の部分)は以下の通りです。 ----------------------------------------------------------- <div id="left"> <div class="left_top">{$contents_title}</div> <div class="left_bottom"></div> </div> ----------------------------------------------------------- テンプレートファイルの{$contents_title}に 「ベビーアイテム.info」という文字をassignしているのですが、 文字化けして表示されてしまいます。 ちなみに、「babyitem.info」という文字をassignすると、 そのまま、「babyitem.info」と表示されます。 正しく表示する為には、どの辺りの設定を確認すれば良いでしょうか? ご教授くださいませ。

    • 締切済み
    • PHP
  • HTML、CSSでのHP作成で質問

    ここ何日かでhtmlとcssでホームページを作り始めた初心者です。 わからないところがあって質問させていただきました。 今、タイトルバーとサイドメニューのみがある状態です。 <body> <!-- タイトル --> <div class="titlebar">サイトの名前</div> <br> <!-- メニュー --> <ul> <div class="menu"><li>項目1</li></div> <div class="menu"><li>項目2</li></div> <div class="menu"><li>SAMPLE</li></div> <div class="menu"><li>SAMPLE</li></div> <div class="menu"><li>SAMPLE</li></div> </ul> </body> こんな感じです。 ページの上部はタイトルバー、左側に縦にサイドメニューを置いていますので、 つまりページの内容を ------------------- タイトル ------------------- メ|    ここに ニ|    内容を ュ|    書きたい ー| | | このように書きたいということになります。ですが、このままhtmlで サイドメニューに続けてプログラムを書くと、メニューの下に表示されてしまうと思います。 うまくこの場所に内容を始めるにはどうすればよいでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • 指定した箇所へスクロールさせたい

    お世話になります。 a.htmlの中のテーブルのセル内に、テキストを入れてあります。このセルにだけ縦スクロールバーをつけてあります。下記ソースの<div class="scrlbox">の部分です。 別ページのb.htmlにあるリンクをクリックした時、a.htmlを子画面で開いて、なおかつテーブルのセル内の指定した行まで自動でスクロールダウン/アップするということは可能でしょうか? (window.scroll()なかんじではなく、セル内"だけ"がスクロールするイメージです。) a.htmlとb.htmlの連携部分はあまり気にせず、テーブルのセル内のテキストだけを任意の場所へスクロールさせることが可能かどうか、説明がややこしいですが、ご教授、よろしくお願いいたします。 ----------------------- a.html ----------------------- <table border="1" width="450" height="420" bgcolor="#9999ff">  <tr>   <td width="15" height="350">&nbsp;</td>   <td width="420" height="350">    <div class="scrlbox">     ★みだしその1<br/>     ああああああ(長めのテキストが入ります)・・・     <br/><br/>     ★みだしその2<br/>     ああああああ(長めのテキストが入ります)・・・     ★みだしその3<br/>     ああああああ(長めのテキストが入ります)・・・    </div>   </td>   <td width="15" height="350">&nbsp;</td>  </tr>  <tr><td colspan="3" align="center">footer</td></tr> </table>

  • クリックすると上に開くアコーディオン

    当方、設置とCSSによる表示のカスタマイズはできますが、プログラムの修正はできないためぜひ皆様のお知恵をお貸しください。よろしくお願いいたします。 現在、スマホ向けサイトをコーディング中なのですが、コンテンツをアコーディオンで作成したいと考えています。 タイトルをクリックすると中のコンテンツが見える仕組みは同じなのですが、クリックするとタイトルが下に下がり、その上にコンテンツを開くという動作をさせたい場合はどの部分をどのように修正すればよいのでしょうか? アドバイスどうぞよろしくお願いします。 【acordion.js】 $(function(){ $(".acordion").hide(); $("h3").click(function(){ $(this).next().slideToggle(); $(this).toggleClass("open"); }); $(".acordion .close").click(function(){ $(this).parent().slideToggle(); }); }); 【acordion.jsを読み込んだHTML】 <h3>コンテンツのタイトル</h3> <div class="acordion"> コンテンツの中身。この部分をタイトルの上に開きたいです。<br /> 文章量は固定ではないため、可変に対応できると嬉しいです。 <div class="close">close</div> </div>

  • 【jQuery】クリックで開閉するメニュー

    今、クリックで開閉するプルダウンメニューを以下のように作っているのですが 【HTML】 <div class="menu">メニュー</div> <div class="a"> <p>カテゴリー1</p> <p>カテゴリー2</p> </div> 【jQuery】 $(".menu").click(function(e){ if($(".a").css("display") == "none"){ $(".a").show(); }else{ $(".a").hide(); } }); ".munu"の要素をクリックした場合、メニューの".a"の要素が開き もう一度".munu"の要素をクリックすると、メニューの".a"の要素が閉じます。 基本的な動作はこれでいいのですが ".munu"や".a"の要素以外の場所をクリックしたら ".a"を閉じるようにしたいのですが、どのようにすればいいのでしょうか? OKWaveサイトのメニューバーの開閉みたいに、メニューバー以外の場所をクリックしたら 表示されているメニューのカテゴリーが閉じる動作にしたいです。

  • Flashをクリックした時にtoggle判別をする方法

    Ajaxカテゴリでの質問と迷いましたが、こちらで投稿させていただきます。 指定classをクリックすると、 コンテンツの表示・非表示が切り替わる動きを jQueryのtoggleにて実装しています。 例) <dl> <dt class="Menu">タイトル</dt> <dd class="Contents">コンテンツ</dd> </dl> この「タイトル」の部分をFlashにすると、 クリック判定ができなくなりました。 CSSにてz-indexの指定を入れてみましたが、 Windows+IE7ではFlash側でのオンマウス判定が効かなくなってしまいました。 Flashを利用してtoggle判定をする方法はありますか? FlashからgetURLでjavascriptに指示を出す方法でもよいのですが、 toggleのように交互に実装させる方法がわかりません。 解決案のアドバイスをいただけたらと思います。 よろしくお願い致します。

  • 2カラムのHPを作っているのですがリンク先の指定が出来ず困っています。

    2カラムの左側がメニューで、右側がコンテンツ表示といった形をとりたいのですがうまくいきません・・。 ↓の様な形 -------  メ| コ |  ニ| ン |  ュ| テ |  -| ン |   | ツ | ------- <div>で囲っているのですが<div>全体に対してリンクを飛ばすといったことは出来ないのでしょうか? 右側でテーブルを作って<name><target>を作っても同じ<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でやってるので計算がずれてる?とかも考えたのですが、対応策がよくわからないため、皆様のお知恵をお借りしたく書き込ませていただきました。 分かるかたいらっしゃいましたらご助言お願い致します。

専門家に質問してみよう