• ベストアンサー

画面を開いたときに指定位置まで自動的にスクロールする方法

お世話になります。 掲題がなにを指しているかと申しますと、 HTML(サーブレット)からリンクが開かれたときに指定位置までスクロールした状態で開かせてやりたいのです。 Wikipediaのような目次をクリックすると自動的にその題目までスクロールするイメージです。 JavaScriptにて、window.ScrollTo(座標)という方法は見つけましたが、Wikipediaもこの方法をとっているのでしょうか? ほぼズレがないのでなんとなくこの方法以外にもあるのかなと思ったのですが、、、Wikipediaソースをみると、<a href= のあとに#.E…というリンクが張ってあります。これがキーなのでしょうか? よろしくお願い致します。

  • HTML
  • 回答数2
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • steel_gray
  • ベストアンサー率66% (1052/1578)
回答No.2

要素にidを付けておき、そのidをリンク先に指定します。 この場合のidをフラグメント(ID)と呼びます。 呼び出し側 <a href="#midashi1">見出し1に</a> ~ あて先側 <h2 id="midashi1">見出し1</h2> 外部から呼び出す(リンク)するときは <a href="http://example.com/page1.html#midashi1">見出し1に</a> なお、昔はあて先側では<a name="midashi1">を利用していました。 昔からの慣習で今でもこちらを使う人も多いし、古いブラウザへの対応を考慮して <h2 id="midashi1"><a name="midashi1">見出し1</a></h2> みたいに両方書ケースも見られます。

その他の回答 (1)

  • Tiffa9900
  • ベストアンサー率31% (68/216)
回答No.1

<a>タグのname属性を利用していると思われます。 <a href="aaa.html#bbb"></a>でリンクへ飛ぶと aaa.html において<a name="bbb">と記述されている部分へ自動的に移動します。 たとえ<a name="bbb">が無くてもエラーになる事はありません。通常通り、一番上が表示されます。 ただし、高速回線が発達した最近ではあまりありませんが、 htmlのサイズが非常に大きく、画面表示に時間がかかる場合などは、<a name=~>を認識する前に、リンクのジャンプ処理が完了してしまい結果その位置まで移動しないという現象も発生する可能性があります。

uzo3839
質問者

お礼

早急なご回答誠に有難うございました。m(._.)m

関連するQ&A

  • 動的に切り替わる指定座標へ、スムーススクロール

    window.scrollTo("0",Y);で、 ウインドウを指定位置に移動させているのですが、 これをスムーススクロール対応するには、 どうすればよいでしょうか? Yは、指定座標(モニタ上の絶対位置)で、 任意のタイミングで、動的に取得してます。 イメージとしては、 関数みたいなのに、Y座標を渡して、 その都度、スムーススクロールさせるような使い方を想定してます。 jQueryとか、プラグインを使ってもいいですが、 なるべくシンプルに行きたいと思ってます。 また、結果的に、ページ内リンクも、スムーススクロールすることになったとしても別に構いませんが、 やりたいのは、リンクをスムーススクロールすることではなくて、 「動的に、都度切り替わる、Y座標へ、スムーススクロールしたい」ってことです。 難しいようであれば、 厳密なスムーススクロールじゃなくても、 何となくそれっぽく見えれば構いません。

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

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

  • マウスでページを横スクロールさせる方法

    縦方向にスクロールさせることはできましたが横スクロールの方法がどうしてもわかりません。 縦スクロールのやり方も下のスクリプトより簡素化できますでしょうか? <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function mScroll(){ scrollTo (0,(document.body.scrollHeight-document.body.clientHeight)*event.y/document.body.clientHeight); } </SCRIPT> </HEAD> <BODY onmousemove="mScroll()"> </BODY> </HTML>

  • 縦スクロールの表示位置によるDOM

    縦長のHTMLコンテンツで下にスクロールした時にそのスクロール位置によって 目次のリンクにselectedクラスをDOMで追加し、現在どの部分を表示しているのかを視覚的にわかりやすくしたいのですが、 方法がわからず悩んでおります。そもそもHTMLの構造的に可能どうかもわからない素人ですが、どなたかご教授頂きたいと存じます。 現在のHTMLの構造は、 コンテンツのHTMLの前に目次の記述があり、その目次部分はposition:fixedで常に見える位置に表示してあります。 構造を簡単にしますと以下のようになっております。 <!-- 目次 START --> <div id="toc"> <ul class="toc"> <li class="toc_lebel_1"> <a href="#見出し1"> class="toc">見出し1</a> </li> <li class="toc_lebel_1"> <a href="#見出し2"> class="toc">見出し2</a> </li> <li class="toc_lebel_1"> <a href="#見出し3"> class="toc">見出し3</a> </li> </ul> </div> <!-- 目次 END --> <!-- コンテンツ START --> <h1> <a name="見出し1" id="見出し1">見出し1</a> </h1> ・・・ <h2> <a name="見出し2" id="見出し2">見出し2</a> </h2> ・・・ <h2> <a name="見出し3" id="見出し3">見出し3</a> </h2> ・・・ <!-- コンテンツ END --> このページはかなり縦長のページになっており、下にスクロールした際に現在表示している位置(例えば、見出し1と見出し2の間を表示している場合の位置)によって 目次の該当箇所の<a>タグにselectedのようなクラスを追加したいです。 よろしくお願いします。

  • 狙った位置にスクロール位置を合わせる

    JavaScriptでHTMLの<A href="#foo">のようなドキュメント内ジャンプを実現させたいと思っていますが、具体的な方法がわかりません。 Aタグとの違いは、Aタグだけですと縦(Y)の移動しかできないところを、横(X)の位置も指定したいと思っています。 具体的な使用例を出します。 縦・横に広いWEBサイトが存在していたとします。ブラウザを開いた時点では、サイト上の右側に位置する情報、下側に位置する情報はみることができません。 右側には複数の情報が存在していて、各情報がページの中央に持ってこれるような、スクロールをフォーカスさせるリンクです。 いくつかのキーワードで検索してみたのですが、中々それらしい情報が見つかりませんでした。 もし参考になりそうなサイトなどがございましたら、あわせてご教授頂ければ幸いです。 よろしくお願い致します。

  • これだとスクロールバーはつけれないの??

    <a href="aaa.html" target="_blank" onClick="window.open('aaa.html','','width=400,height=470');return(false)" style="text-decoration:underline;">リンク</a> これで出てきた小さな新窓にスクロールバーはつけれないのですか?? つけれるのならばそのHTMLを教えてください^^

  • URLをスクロール

    とても困ってます。 やりたいことは、「指定したURLのページを自動スクロールさせたい。」です。 JavaScript&フレームを使用してローカルのHTMLをスクロールさせる方法は、あったのですが・・・ ((フレーム名).location.href =HTMLファイル名) 上記方法にてHTMLファイル名部分にURL(例えば、http://www.okweb.ne.jp)と入れて動作させると 、「アクセスは拒否されました」のエラーで動作しません。 JavaScriptのセキュリティ上の仕様なようです。 できないものだとあきらめていたのですが、 仕事先の方で「実際動いてるソフトあるよ。」と言われたため、探しているところです。 どなたか、ご存知の方いらっしゃいましたらよろしくお願いします。 ブラウザは、IE5.5SP2以降です。

  • ページ読み込み時に自動でスクロール

    <body>にonloadを記述する方法以外で あるページを読み込んだ時に、自動的にページ最下部へ スクロールさせたいのですが 以下コードを記述してもエラーも起こらず、何も起きませんでした。 <script type="text/javascript" language="javascript"> <!-- window.onload = new function(){ window.scrollBy(0,300) }; window.onload = new function(){ alert("aaa") }; // --> </script> ちなみに、下側のalertは問題なく動作しております。 scrollby以外でのスクロールでもいいので、ご存じの方教えて下さい。 (できれば一瞬でスクロールする方がいいです。)

  • リンククリック時 ターゲットフレームの自動スクロール

    左右にフレームで分けたHTMLファイルがあります。 左のフレームにはリンク集があります。 その中のあるリンクをクリックしたときに、 右のターゲットフレームにリンク先のURLを描画させています。 例えば<a href="http://www.xxx.html" target="frame_right"> のような感じです。 リンクをクリックして、描画したターゲットフレームの内容を、自動的に100pxだけ下にスクロールするようにするにはどのようにしたらよいでしょうか? もとのフレームセットのHTMLか、もしくは左フレームのリンク集の部分にJavaScriptを記述して実行したいと考えております。 ご教授よろしくお願いします。

  • スクロール位置を中央にしたい

    こんにちは。質問させてください。 クリックした位置に画面がスクロールするものを作っています。 今の状態だとクリックした位置にスクロールするのですが ストップする位置が画面の左上で止まります。 これを画面の中央で止まるようにしたいのです。 ヒントをいただけませんでしょうか。宜しくお願い致します。 // 現在のスクロール量を取得 function getScroll(){ var x, y; if(document.all !== void 0){ // IE4, IE5, IE6 x = document.body.scrollLeft; y = document.body.scrollTop; }else if(document.layers !== void 0 || (navigator.userAgent.indexOf("Opera") != -1 || window.opera !== void 0)){ // NN4, Opera6 x = window.pageXOffset; y = window.pageYOffset; }else if(navigator.userAgent.indexOf("Gecko") != -1){ // NS6, Mozilla x = window.scrollX; y = window.scrollY; }else{ x = y = 0; } return {x: x, y: y}; } // スクロール始めのスクロール量 var SCROLL ; var divCountScroller = 50 ; // 分割数 // 現在のスクロール位置から、指定座標までスクロールします function scroller( x, y, count ){ if( count === void 0 ){ count = 0 ; SCROLL = getScroll(); } if( count++ < divCountScroller ){ var c = count/divCountScroller ; var nx = SCROLL.x+( x-SCROLL.x )*( c+1/Math.PI*Math.sin( Math.PI*c ) ); var ny = SCROLL.y+( y-SCROLL.y )*( c+1/Math.PI*Math.sin( Math.PI*c ) ); window.scrollTo( nx, ny ); setTimeout( "scroller("+x+","+y+","+count+");", 30 ); } }