• 締切済み

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

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

みんなの回答

回答No.3

ごめんなさいNO1、2です 。 補足し忘れました。 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> というのを自然なスクロールで移動させたいんです。 説明不足で申し訳ないです。

関連するQ&A