• 締切済み

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

こんにちは。質問させてください。 クリックした位置に画面がスクロールするものを作っています。 今の状態だとクリックした位置にスクロールするのですが ストップする位置が画面の左上で止まります。 これを画面の中央で止まるようにしたいのです。 ヒントをいただけませんでしょうか。宜しくお願い致します。 // 現在のスクロール量を取得 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 ); } }

みんなの回答

  • masaota56
  • ベストアンサー率41% (58/139)
回答No.1

移動先をx,y クアイアント領域の幅と高さをw,hとすると x = x - w / 2; y = y - h / 2; でどうでしょうか。

関連するQ&A

  • スクロールの時間調節

    初めて投稿します。 よろしくお願いします。 下記のような ソースで テキストのスクロールをしようと思いますが スクロールの早さの調節をしたい場合どうしたらよいのでしょう? プログラムには詳しくないので すぐに使える状態で教えていただけませんか? <SCRIPT language=JavaScript> <!-- var count,max,timer function init(){ count=0 max=(document.all?document.body.scrollHeight:document.height?document.height:1000) autoScroll() } function autoScroll() { if(navigator.appVersion.charAt(0)>=3) { if(count<max) { window.scroll(0,count++); timer=setTimeout("autoScroll()",4); } } } //--> </SCRIPT> <BODY onload=init()>

  • スクロール位置 ページ切り替え前と同じにしたい

    POST送信をしてページが切り替わった時に、切り替え前のスクロール位置にスクロールが来るようにしたいです。 以下のソースでスクロール位置は取得できるようなのですが、切り替え後のページに反映させるにはどうしたらいいでしょうか? function getScrollPosition() { var obj = new Object(); obj.x = document.documentElement.scrollLeft || document.body.scrollLeft; obj.y = document.documentElement.scrollTop || document.body.scrollTop; return obj; }

  • 自動的にスクロールするようにするには

    文章が自動的にスクロールするようにしたいので本を見ながらやってみたらできたのですが・・・ 下がる速度が思ってたほど遅いです。個人的にはもっと高速で下に下がって欲しいのですが超低速で下がっていきます。どうすれば早くなるか教えてください。それともこれ以上早くは下がってくれないとか? <html> <body> <head> <title></title> </head> <body> <script language="javascript"> <!-- count = 0; var timerlD; function Scroll(){ count += 1; if( count < 600) { scroll(0, count ); } else{ cleartimeout( timerlD ); count = 0; return; } timerlD = setTimeout( "Scroll()", 1 ); } //--> </script> ここに自動的にスクロールする文章を打ってます。 gooに投稿できる文字数の関係で消しました。 <!--最後にスクロールON! --> <script language="javascript"> Scroll(); </script> </body> </html>

  • Visial C++おけるπの使い方

    自宅でCプログラミングの練習をするためVisial C++ 2008を使って プログラムをしています。y<sin(πx)となった時の 割合などを計算するプログラムで                「M_PIが定義されていない識別子です」 とでてきます。所持している本を参考にしてもM_PI=πとして用いる と書いてあり、math.hもインクルードしてるので原因が分からなくて 困ってます。Visial c++ではπの使い方には何か別の使い方がある のでしょうか?よろしくお願いします。 *↓が実際に作ったプログラムです。 #include <stdio.h> #include <stdlib.h> #include <time.h> #include <math.h> int main(void){ int i,n,count=0; double x,y,r,error; srand((unsigned)time(NULL)); /*乱数の初期化*/ printf("How many trials?"); scanf("&d",&n); for(i=0;i<n;i++){ x=rand()/(RAND_MAX+1.0); y=rand()/(RAND_MAX+1.0); if(y<sin(M_PI*x)){ count++; } } r=(double)count/n; /*キャスト演算子を使用*/ error=2/M_PI-r; printf("Result is %f (Error: %f)\n",r,error); return 0; }

  • 複数のボールの落下、バウンドのさせかた

    お分かりの方、どうかお知恵をお貸しください。 画像(文字)がページのオンロードで落下してくるものですが、 http://flabo.net/labo/bound/index.html <html> <head> <title></title> <script type="text/javascript"> window.onload = init; var frac = 2; var bound = 0.5; var count = 0; var elm; var y = 0; function falling() { y += ++count * 0.098 * frac; elm.style.top = y; if(y >= wH){ y = wH; count = Math.ceil(-count * bound); if( count == -1 )clearInterval( handle ); } } function init() { elm = document.getElementById("sample"); wH = document.all ? document.body.clientHeight : window.innerHeight; wH = wH - elm.height; handle = setInterval(falling,10); } </script> </head> <body> <img src="f.gif" id="sample" style="position:absolute"> </body> </html> のページにあるようなもので、この物体、や文字をここでは1つですが、10個の文字を横に並べて、落ちる速度や、バウンドの速さなど このソースに手を加えてできますでしょうか?(このソースに手を加えてできなければ、何かほかに良いスクリプトはありますでしょうか) 自分でも試してもみたのですが、2つとしても上手く作動しなく、 とても頭を抱えてしまっています。 お分かりになる方がおりましたら、どうかお知恵をお貸しください。 宜しくお願いいたします。

  • スクロールバーの位置に合わせて画像を移動

    縦のスクロールバーの位置に合わせて画像を移動したいです。 マウスの位置に合わせて移動させる事は可能なのですが、すぐ動いたしまうので。。 一応、マウスの位置に合わせて移動は下記のようにしています(元々、縦横方向の移動を紹介しているページがあったのでそれを拝借して縦方向の移動だけにしています。) <script language="JavaScript"> <!-- mov_value=3; y_add=0; y_cur=0; y_pos=0; y_dotti=0; my_time=0; pos=0; function judge_pos(e){ if(document.layers){y_pos=e.pageY;} if(document.all){ y_pos=document.body.scrollTop+event.clientY; } if(y_cur<=y_pos)y_dotti=1; else y_dotti=0; disp(); } function disp(){ if(pos==0){pos=1; y_cur=y_pos;} if(y_dotti==1 && y_cur<=y_pos+y_add)y_cur+=mov_value; else if(y_dotti==0 && y_cur>=y_pos+y_add)y_cur-=mov_value; if(document.layers){ document.layers["lay0"].moveTo(y_cur); document.layers["lay0"].visibility='show'; } if(document.all){ document.all("lay0").style.pixelTop=y_cur; document.all("lay0").style.visibility='visible'; } if(y_dotti==1 && y_cur<=y_pos+y_add){ clearTimeout(my_time); my_time=setTimeout('disp();',20); } else if(y_dotti==0 && y_cur>=y_pos+y_add){ clearTimeout(my_time); my_time=setTimeout('disp();',20); } else { y_cur=y_pos; } return false; } if(document.layers)document.captureEvents(Event.MOUSEMOVE); document.onmousemove=judge_pos; //--> </script>

  • 一秒後に実行するようにしたところ全く動かない

    一秒後に実行するようにしたところ全く動かなくなってしまいました。 ・これは動く //fadein-from-スクロール350後に実行 $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ $(this).addClass('scrollin'); } }); }); }); ・これが動かない //一秒後に実行 // setTimeout(function(){ // $(this).addClass('scrollin'); // },1000); //fadein-from-スクロール350後に実行 $(function(){ $(window).scroll(function (){ $('.js-translate3d-lower-right--delay-one-s').each(function(){ var elemPos = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > elemPos - windowHeight + 350){ //一秒後に実行 setTimeout(function(){ $(this).addClass('scrollin'); },1000); } }); }); }); ・下記に間違いがあるのでしょうか? if (scroll > elemPos - windowHeight + 350){ //一秒後に実行 setTimeout(function(){ $(this).addClass('scrollin'); },1000); }

  • removeEventListenerの必要性

    参考にしているJavaScriptのソースで下記のような部分があったのですが、 (画面に描画をするプログラムの一部です。動きとしてはマウスの動きに合わせて模様が描かれて残像が残って消えていきます。) j(b)関数の中の一行目でdocument.removeEventListener("mousemove", j, !1); としてmousemoveのイベントリスナーを削除しているのが何故なのか解らず困っています。 メモリリークが発生するとかそういう問題なのでしょうか? ----------------------------------------------------------------------- <script type="text/javascript"> (function() { function j(b) { document.removeEventListener("mousemove", j, !1); document.removeEventListener("touchstart", j, !1); y(b); var g = l - p * 0.5, f = m - q * 0.5, a = Math.sqrt(g * g + f * f), b = l + g / a * 150, a = m + f / a * 150, g = Math.atan2(f, g); g += Math.PI * (0.5 + Math.random() * 0.5) * (Math.random() > 0.5 ? 1 : -1); for (f = 0; f < z; f++) { for (var e = A[f].f, c = 0; c < r; c++) { var d = e[c], h = Math.PI * 0.15 / r * c + g, k = Math.cos(h) * (r - c) * 2, h = Math.sin(h) * (r - c) * 2; d.x = b; d.y = a; d.d = k; d.e = h } j = !1 } document.addEventListener("mousemove", y, !1); document.addEventListener("touchmove", y, !1); document.addEventListener("touchstart", K, !1); setInterval(L, 1E3 / 30) } ------------------------------------------------------------------------- 同じソースの中で window.onload = function(){ ・・・   document.addEventListener("mousemove", j, !1); というようにイベントリスナーに登録しているところは見つかったので、これを削除しているのかとは思うのですが、 何分未熟なもので、それがどういう意図によるものなのか理解できません。 どなたか、知恵を貸して頂けないでしょうか?

  • Jqueryでリストのスクロール

    <ul><li></li></ul>にて作成したリストで選択した行の背景色を変更し、選択した行が リストの先頭にスクロールするするサンプルを試しに作成してみました。 Jqueryを使用して下記のように作成してみましたが選択行がリストの先頭にうまくスクロールしずに 微妙な位置までスクロールして止まってしまいます。うまくリストの先頭に来るようにスクロールさせる にはどのようにすればよろしいでしょうか。 【サンプル】 <html> <head> <meta charset="UTF-8" /> <script type="text/javascript" src="../jquery-1.6.1.min.js"></script> <script type="text/javascript"> $(function(){ $("ul.update-scroll li").click(function() { $("ul.update-scroll li").each(function(){ // 既に選択済の場合、選択を解除 if( $(this).hasClass("selected") ) { //alert( $(this).text() ); $(this).toggleClass("selected"); } }); // 選択済に変更 $(this).toggleClass("selected"); // 選択済の位置がリストの先頭に来るようにスクロール //var i = $(this).index(); var p = $(this).offset().top; //alert(p); $("ul.update-scroll").animate({ scrollTop: p }, "fast"); }); }); </script> <title>CSS</title> <style type="text/css"> ul.update-scroll { list-style-type: none; width: 400px; height: 100px; overflow-y: scroll; border: 2px solid #bbb; padding-left: 1.5em; } ul.update-scroll li { margin-top: 0.3em; } ul.update-scroll li.selected { background:red; } ul.update-scroll a { text-decoration: none; } </style> </head> <body bgcolor="rgba(255,0,0,0.15)"> <ul class="update-scroll"> <li>[2010/01/03]: <a href="javascript:void(0);">項目10</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目9</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目8</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目7</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目6</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目5</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目4</a></li> <li>[2010/01/03]: <a href="javascript:void(0);">項目3</a></li> <li>[2010/01/02]: <a href="javascript:void(0);">項目2</a></li> <li>[2010/01/01]: <a href="javascript:void(0);">項目1</a></li> </ul> </body> </html>

  • 大きさを固定して、さらにぶるぶる・・・・

     こんにちは、質問させてください。 JavaScriptでウィンドウの大きさをリサイズできないように固定し、 さらに、そのウィンドウを、ぶるぶる・・・と震えさせたいのですが、 その組み合わせ方がわかりません。 <html> <head> <title>無題ドキュメント</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript"> <!-- var shake_len = 30, shake_max = 5, shake_count = 0; function shake () { var x = 0, y = 0, n = shake_count % 4; if(n == 0) x = -shake_len; else if(n == 1) y = -shake_len; else if(n == 2) x = shake_len; else y = shake_len; window.moveBy(x, y); shake_count++; if (shake_count < shake_max * 4) setTimeout("shake();", 50); } //--> </Script> </head> <body onload="shake()" bgcolor="#FFFFFF" text="#000000"> </body> </html> と <scriptlanguage="JavaScript"> function changrsize(){ window.resizeTo(300,250); } window.onload=changesize; window.onresize=changesize; </Script> を組み合わせた感じのものを考えているのですが・・・・・。 教えてください!

専門家に質問してみよう