ページ先頭にスムーズに移動する方法

2010/01/18 00:28

このQ&Aのポイント

アンカータグを使わずにページ先頭にスムーズに移動する方法を教えてください。
試したスクリプトではページごとにスクロール量が異なり、カチカチの動きになってしまいます。
アンカータグが使えない状況下で、スクロールを滑らかにする方法を教えてください。

ページ先頭にスムーズに移動（アンカータグ不使用）

上記の件、<a href="javascript:window.scroll(0,0)">Top</a>だと、カチカチの動きなので、これを滑らかにしたいと思い、教えて頂けると助かります。【前提】１．アンカータグ使用で、ページ先頭にスムーズに移動させる方法は、 http://smallwebmemo.blog113.fc2.com/blog-entry-245.html のように、いくつも紹介サイトがありますが、ある理由で、アンカータグが使えません。２．そこで、苦肉の策で、window.scrollTo(0,0)を使って、以下のようにしてみました。【試したスクリプト】 ■外部javascriptファイル名：scroll.js var interval=100;//0.1秒後に、実行 var n=0;//下のfor文のiを代入する変数 function pageScroll(){ for(i=500;i>=0;i--){//決め打ちで、500pxlから開始して、0まで window.scroll(0,i); n=i;//500→0まで変化し、最後は、0となる } if(n>0){//0より大きいなら、setTimeout();を有効とする、n=0なら、無効 setTimeout("pagescroll()",interval); } } ■html側： <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>テスト</title> <script src="./scroll.js" language="javascript"></script> </head> <body topmargin="0" leftmargin="0"> <img src="0.jpg"/><br><br> <a href="javascript:pageScroll()">Top</a> </body> </html> 【結果】 ■動くことは動くのですが、ページごとにスクロール量が極端に異なるので、決め打ちの500からの開始ですと、ものすごく遅いページとそうでないページに極端に分かれます。仕方なく、上記のiの初期値を50として、開始位置を、topのすぐ近くにして、「カチカチではないかなぁ」という程度にしてます。→要は、ごまかしです。【お教え頂きたいこと】 ■アンカータグを使わず、window.scrollTo(0,0);かscrollBy();などを使って、同様な動きを付ける方法、もしくは、サイト名が、おわかりになる方は、教えて頂きたいと思います。よろしくお願いします。

joy_28
お礼率60% (3/5)

JavaScript
回答数5
ありがとう数4

みんなの回答 （5）
専門家の回答

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

ベストアンサー

my--
ベストアンサー率89% (91/102)

2010/01/19 14:05 回答No.5

>IE8の時に、「エラーガ発生しましたが... あらま。こちらでは確認できませんでしたが、まぁその程度の者です。 <a href="javascript:pageTop()">TOP</a> この書き方はよろしくないという記事をあちこちで見かけますがどうしてもと言うなら function pageTop() { O().scrollUp({}, 0); } ------------------------------------------- とりあえずこちらも置いときます。 //id'top'のみ適用 function hoge (e) { var elm = e.target || e.srcElement; if (elm.id == 'top') { O().scrollUp(e, 0); //0までスクロール } } O(document).addEvent('click' ,hoge); //リスナ追加 html <a id="top" href="#">Back to top</a>

質問者

お礼 2010/01/19 15:14

my--さん、早い、ご教授ありがとうございました。 function pageTop() { O().scrollUp({}, 0); } これで、アンカータグ使用しなくても、ページトップにスムーズに移動してくれました！ Flashが一番長く、その次にPHPで、javascriptは、サブウィンドウ開く位しか使ったことなかったので、今回は、大変、勉強になり、javascriptの奥深さに気付かされました。おかげ様で、javascriptをちゃんと勉強するように、決意できました。ありがとうございました。

ログインすると、全ての回答が全文表示されます。

その他の回答 (4)

my--
ベストアンサー率89% (91/102)

2010/01/19 03:39 回答No.4

>No.3 if (window.event) { //ココ event.cancelBubble = true; event.returnValue = false; } さっそくだけど、バグあったorz 失礼しやした。

質問者

補足 2010/01/19 11:53

my--さん、コードまで書いて頂き、本当にありがとうございます！ササッと、javascriptのコードをお書きになられて、凄いですね。頂いたコードを外部scriptの、my--.jsとし、普通に、<a herf="#top">Top</a>と記載すると、IE8、FireFox,GoogleChromeで、一瞬ではなく、スムーズに移動しました。この動きが欲しかったのです！少し気になるのは、IE8の時に、「エラーガ発生しましたが、処理しました」とメッセージが出ますが、稼働してます。但し、本当に申し訳ないですが、今回は、アンカータグが使えないので、<a href="#top">TOP</a>と記載できないのです。それで、<a href="javascript:window.scroll(0,0)">TOP</a>の代わりに、<a href="javascript:pageTop()">TOP</a>と記載すれば、Y座標の０に、自動的にスムーズに移動してくれるカスタム関数　pageTop()の中身をどうしたらいいのかということで、質問させて頂いている次第です。引き続き、ご教授頂ければ、幸いです。

ログインすると、全ての回答が全文表示されます。

my--
ベストアンサー率89% (91/102)

2010/01/19 03:08 回答No.3

探せばありそな気はしますが。。。上方向スクロールしか対応できてませんです。 function O(elmId) { 　function Const() { 　　this.element = document.getElementById(elmId) || elmId; 　} 　Const.prototype = { 　　scrollUp: function (e, p) { 　　　var end = !isNaN(p) ? p : 0; 　　　var sTop = document.body.scrollTop || document.documentElement.scrollTop; 　　　var dist = sTop - end; 　　　var tId = setInterval( 　　　　function () { 　　　　　var r = document.body.scrollTop || document.documentElement.scrollTop; 　　　　　if (end + dist < r) clearInterval(tId); 　　　　　if (parseInt(end + dist) > end) 　　　　　　scrollTo(0, end + (dist -= (dist > 20) ? dist * 0.08 : dist / dist)); 　　　　　else clearInterval(tId); 　　　　}, 10 　　　); 　　　if (event) { 　　　　event.cancelBubble = true; 　　　　event.returnValue = false; 　　　} 　　　if (e && e.preventDefault && e.stopPropagation) { 　　　　e.preventDefault(); 　　　　e.stopPropagation(); 　　　} 　　}, 　　setScrollUp: function (name, num) { 　　　var self = this; 　　　this.addEvent(name, function (e) { self.scrollUp(e, num); }); 　　　return this; 　　}, 　　addEvent: function (name, func, cap) { 　　　if (this.element.addEventListener) 　　　　this.element.addEventListener(name, func, (cap || false)); 　　　else 　　　　this.element.attachEvent('on' + name, func); 　　　return this; 　　} 　}; 　return new Const; } //3つのメソッドを使ってみる //普通にhref'#top'からid/name'top'アンカーへ function hoge (e) { 　var elm = e.target || e.srcElement; 　if (elm.tagName != 'A') return; 　else if (elm.href.indexOf('#top') < 0) return; 　var links = document.getElementsByTagName('a'); 　var n = links.length, pos = 0; 　for (var i = 0; i < n; i++) { 　　if (links[i].id == 'top' || links[i].name == 'top') { 　　　pos = links[i].offsetTop; 　　　if (pos >= elm.offsetTop) return; 　　　break; 　　} 　} 　O().scrollUp(e, pos); //posまでスクロール } O(document).addEvent('click' ,hoge); //リスナ追加 O('id').setScrollUp('click', 100); //位置指定してscrollUpを設置バグがあったら勘弁。

ログインすると、全ての回答が全文表示されます。

bakakyatap
ベストアンサー率38% (115/299)

2010/01/18 19:06 回答No.2

＞　for(i=500;i>=0;i--){//決め打ちで、500pxlから開始して、0まで＞　window.scroll(0,i); ＞　n=i;//500→0まで変化し、最後は、0となる＞　} を使う限り、スピードをコントロールするのは不可能です。他の方のは、ENDを無制限にするだけです。S_・・は間違いで、削除しても問題ありません。と言うより、そのまま使用しても、意味ないですね。 FLASHを使うか、位置情報把握して、仮想領域＋表示領域の高さで止めるか、止めることを無視してほっておくてもあります。＜－つまり100mmsで２、３ドットづつスクロールを繰り返す。でなければ、IE固有（今は他のブラウザでも動くものも）を使用するてですね。アニメーション機能とかあります。 http://msdn.microsoft.com/en-us/library/ms533050(VS.85).aspx http://msdn.microsoft.com/en-us/library/ms533112(VS.85).aspx http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx

質問者

お礼 2010/01/20 00:21

始めての質問で、サイトの使い方が不慣れで、お礼が遅れました。このたびは、ありがとうごさいました。

質問者

補足 2010/01/19 02:36

bakakyatapさん、回答ありがとうございます。１．スピードをコントロールするのは不可能です → その通りだと思います。２．FLASHを使うか、 → Flashが使えれば、元々、Flashの出なので、簡単なのですが、使えないです。（後出しじゃんけんみたいで、すみません）３．位置情報把握して、仮想領域＋表示領域の高さで止めるか、止めることを無視してほっておくてもあります。＜－つまり100mmsで２、３ドットづつスクロールを繰り返す。 → この位置情報の取得方法が理解出来てないのです。例えば、pageTopボタンとして配置した、GIFのブラウザーwindow上の位置情報をどうやって取得すれば、いいのかが理解出来てないのが問題だと思ってます。Flash/AS2.0の場合ですと、フレームに、 mc.onEnterFrame=function():Void{ this._y+=(0-this._y)/10;//目標接近スクリプト } とかなんとか書けば、現在位置から0に向かって、縦にスムーズに移動するのですが、javascriptの具体的な記載方法を、理解してないのです。引き続き、ご教授頂ければ、助かります。

ログインすると、全ての回答が全文表示されます。

k0021
ベストアンサー率26% (32/120)

2010/01/18 05:44 回答No.1

javascriptの指定 function ptop(){scrollTo(0,0);s_ct=0;} ■html側： <a href="javascript:ptop()">Top</a> Topをクリックするとページ先頭にスムーズに移動しますが。 scrollTo(0,99999) 99999等大きな数字を指定するとページの最後に飛びますが

質問者

お礼 2010/01/20 00:20

始めて質問したので、サイトの使い方が不慣れで、すみません。ありがとうございました。

質問者

補足 2010/01/18 07:42

k0021さん、早速のご回答ありがとうございます。頂いた、scriptをそのまま使用し、IE8、Firefox、GoogleChromeの３つで試しました。【結果】いずれも、トップに移動はしますが、、<a href="javascript:window.scroll(0,0)">Top</a>と変わらず、一瞬のうちに、ページトップに移動します。【追加の質問】・s_cnt=0;は何かのカウンタだと思うのですが、これは、このスクリプトの中で、どういう役割を持っているのでしょうか？・頂いたスクリプトに、何を追加すれば、ページトップへスムーズに移動するのか、まだ、理解出来てませんので、引き続き、ご教授をお願い申し上げます。

ログインすると、全ての回答が全文表示されます。