• 締切済み

javascriptでの、同ページ内スクロール移動

同ページ内に<a>タグでスムーズで自然な動きのウィンドウスクロール移動をさせたいのですが、どなたか教えて下さい。 javascriptを使うのは知ってるのですが、記述例など具体的に教えて頂ければとても助かります。

みんなの回答

回答No.3

ごめんなさいNO１、２です　。 補足し忘れました。 No2のやり方で可能ですが、 何度もタグ間を行き来する場合は、 もっと複雑なコーティングになります。 それから、分かりやすくするために、 受けて側のダミータグをコーティングしましたが、 何度も行き来する場合は、ないほうがいいです。

回答No.2

なるほど、分かりました。 通常はボタンでコーティングするところですね。 ダミーのタグを使うと簡単ですよ。 <html><head> <title>スクロール</title> <script language="JavaScript"> <!-- //このページ（リンクされる側）のみでコーティング //forでコーティングするとスクロール中操作不能 //setTimeout()で一定時間ごと変数iを増やす var i=0; var KYORI=1350; //移動距離…(1) var SPEED=3; //進む速さ…(2) function auto_scr(){ if(i < KYORI) { i=i+2;　　　 window.scroll(0,i);//（移動軸　X軸、Y軸）…(3) } setTimeout("auto_scr()",SPEED); } //--> </script></head> <body> <div align="center"> <h2>スクロールするスクリプト</h2> <!--読み出し位置…(4)↓--> <A onClick="auto_scr()" Href="#1" >ここから飛ばす</A> <A Name="1" >ここ</A><br><!--ダミーのタグ--> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> <A>ここまで飛ばす</A> <br> エンド </body > </html>

回答No.1

もうちょっと詳しく書いた方が、的確な答えがくると思います。 行いたいことが明確でないので、一応の例を挙げておきます。 <A>タグから読みだしたページが自動的にスクロールします。 通常の<A>タグのリンクから、下記のページへ（コピペ後拡張子を.htmlに） ---------------------------------------------------ここから↓ <html><head> <title>スクロール</title> <script language="JavaScript"> <!-- //このページ（リンクされる側）のみでコーティング //forでコーティングするとスクロール中操作不能 //setTimeout()で一定時間ごと変数iを増やす var i=0; var KYORI=1350; //移動距離…(1) var SPEED=3; //進む速さ…(2) function auto_scr(){ if(i < KYORI) { i=i+2;　　　 window.scroll(0,i);//（移動軸　X軸、Y軸）…(3) } setTimeout("auto_scr()",SPEED); } //--> </script></head> <body onLoad="auto_scr()">//読み出し位置…(4) <div align="center"> <h2>スクロールするスクリプト</h2> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> 0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br> エンド </body > </html>

it-plus
質問者

お礼

すいません。 やりたいのは、画像やテキストをクリックしたら、同ページ内の指定した位置までスクロール移動させたいんです。 ようは、 <a href="#bottom">ここから</a> <a neme="bottom">ここまで</a> というのを自然なスクロールで移動させたいんです。 説明不足で申し訳ないです。

  1. カテゴリ
  2. インターネット・Webサービス
  3. その他（インターネット・Webサービス）

関連するQ&A

  • H・Pの同一ページ内のラベルへ移動するHTML記述方法を教えてください

    H・P作りを始めたばかりです。 同一ページ内のラベルへ移動するHTMLタグの場合「自分のホームページにおけるページ同士のリンクは相対リンクで記述すべし」と書いてありました。 例えば、同一ページ内フォルダにそれぞれindex.html、002.html、003.html、004.htmlのファイルがあったとします。 index.html←→002.htmlあるいは002.html←→003.html←→004.html→002.htmlとリンクさせるには どのようにHTMLタグ記述をすればいいでしょうか。 また、どこに記述すればいいでしょうか。 よろしくご教示お願いいたします。

  • ページのスクロールなどで

    WindowsXPなのですが、ページのスクロールのときや、ウインドウをドラッグ中のときの動きが言葉で言うのは難しいのですが、自然な動きでなくなってしまいました。どうしたら直るでしょうか。わかる人いらっしゃいましたらお願いします。

  • JavaScriptで決まった「時刻」にページを移動するには？

    JavaScriptで決まった「時刻」にページを移動するには？ お世話になります。 JavaScriptを使い、こちらが決めた時刻に自動的に 指定したページに切り替わりようにすどのようにすれば良いのでしょうか？ 例：20時45分に現在のページから「page02.html」に移動する。 <script language="JavaScript" type="text/javascript"> <!-- var time = 45; function setTimer(){ setTimeout("location.replace( './page02.html')", time * 60 * 1000); } //--> </script> 自分なりに「setTimeout」「location.replace」を使って作ってみました。 移動する動作はリアルタイムで見られて良いのですが、 この場合、ページを開いてから45分後に移動してしまう為 指定した時刻での移動とはなりません。 「setTimeout」を使うのが間違っているような気がしますが、 他にどのようなメソッドを使ってよいのか分からない状態です。 必要に迫られJavaScriptを勉強し始めたばかりで分からないことだらけで 途方に暮れております。 ご指導よろしくお願いします。

  • x軸にはスクロールしない、ページ内リンクをスムーズにスクロールするスク

    x軸にはスクロールしない、ページ内リンクをスムーズにスクロールするスクリプトを探しています。 こだわりのページ内リンクスムーズスクロール scrollsmoothly.js http://d.hatena.ne.jp/KAZUMiX/20080418/scrollsmoothly などを色々試しまして、同ページ内のリンクはきれいに動くのを確認しました。 サイトはグローバルメニューが左にあり、横幅が広めのデザインです。 問題は、小さい画面閲覧する際、別ページからページ下部のアンカーへ飛んだ場合です。 一旦ページの最上部左に移動してからアンカーへスクロールするため、 斜め下方向へスクロールし、そこからページの先頭へ戻る場合斜め上にスクロールする 動きになります。 クライアントから動きが気持ち悪いというクレームがあったので、 x軸にはスクロールしない方法を探したのですがなかなかうまくいきません。 jQueryのサンプルなど有りましたら教えてください。

  • javascriptでスクロール

    下記のhtmlソースでjavascriptでスクロールしてトップに戻るリンクを作ったんですが、WinのIEではスクリプトが効かずnoscript内の通常のアンカーが有効になってしまいます。 Firefoxではjavascriptの有効無効を判断して思った通りに動きます。WinIEでもjavascriptが有効のときはスクロールし、無効の時は通常のアンカーになるようにするにはどうすればいいのでしょうか？ WinIEはセキュリティの設定でjavascriptを有効にしてあります。 <script language=javascript> <!-- document.write('<a href="javascript:pageup()">pagetop</a>'); //--> </script> <noscript> <a href="#pagetop">pagetop</a> </noscript>

  • JavaScriptでページ移動関係の質問です。

    JavaScriptでページ移動関係の質問です。 今、私がしたいと思っていることは、ある関数を実行して http://aaa/page=1?a=b,http://aaa/page=2?a=b,http://aaa/page=3?a=b,・・・ と指定ページ（最後のページ: page=X）まで １．全ページにわたり、 ２．ページ内にある要素があるか調べる関数を走らせ、 その結果をアラートなどでわかるようにすることです。 ２は完成していて、１について実現できず困っています。 location.hrefを使ってsetTimeoutで時間を何秒かごとにしても、一回移動してしまえばスクリプトはもう動かなくなってしまいます。 例） location.href=getXXXURL(++currentPage);//移動 bool=findUser(searchID,currentPage);//探す alert(bool); この２を実現する方法についてコードの例を交えて、教えていただきたいです。 よろしくお願いいたします。

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

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

  • スクロールバーの移動量制御【Javascript】

    http://www5.mediagalaxy.co.jp/p-givenchy/skincare/wash/top.html 上のようなページのように、スクロールバーを クリックした時の移動量を制御したいです。 javascriptによる制御だと思いますが、 どなたかわかりやすく教えて頂けませんでしょうか？ 宜しくお願い致します。

  • 特定のページから移動してきた場合にアクションを呼び出す

    お世話になります。 A.htmlとB.htmlがあり、B.htmlにあるXボタンを押すと、A.htmlにページ遷移して、 javascriptが発動するというものを作ろうと思っております。 A.htmlを直接開いた状態では何も起こらずに、B.htmlのXボタンを押してページ遷移した場合のみ発動するというものですが、こういった動きは可能なのでしょうか？ 色々調べたら、forward(page, obj)　を使うと初期データを指定してページ移動することができるということがわかったのですが、この方法でできるのか、またできるとすれば、どのように記述すれば良いか教えていただけると幸いです。 どうぞよろしくお願いいたします。

  • JavaScript スクロール制御

    javascriptの動作についてご教授下さい。 ウィンドウ画面が横1275px 縦925pxで パージ内容が横長の横2350px 縦925pxの ページ全体を横軸スクロールで表示可能なサイトで、 <img>タグで画像を非表示（配置はセンター付近）し、 ある画像リンクへの文字列をクリックでjavascriptから その<img>を非表示から表示に切り替えています。 (ページイメージ) 　　　　　　　　　　　　　　　　　　　　　　　|リンク文字位置| 　　　　　　　　　　　　　　|img位置| 横2350px----------------------------------------------------→ で、今回の質問なのですが、リンク文字はページ右辺に配置しており javascriptからimgを可視化するとスクロールが初期位置(横0)に戻ってしまいます。 スクロール位置はそのままで画像の可視化・非可視化を切り替えたいのですが、ムリなのでしょうか？？ いちよう可視化後に scroll()でスクロールの位置を指定していても スクロールが初期位置(横0)に戻ってしまいます。↓↓↓ この現象はJavaScriptの仕様なのでしょうか？？ 横長のページであることと、リンク文字の配置は仕様として 変更できないものとお願いいたします。 環境 WinXP SP3 IE8(8.06) 画像切り替えソース //引数urlの画像をimgで表示する関数 function visi(url) { 　//imgのプロパティを取得 　var jpg = document.getElementById('jpg_link'); 　jpg.style.visibility = "visible"; jpg.style.display = "block"; jpg.src = url; 　//scroll(1500,0); ←　1500まで行くが初期位置に戻る・・・ }

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する