- ベストアンサー
ページ先頭にスムーズに移動する方法
- アンカータグを使わずにページ先頭にスムーズに移動する方法を教えてください。
- 試したスクリプトではページごとにスクロール量が異なり、カチカチの動きになってしまいます。
- アンカータグが使えない状況下で、スクロールを滑らかにする方法を教えてください。
- joy_28
- お礼率60% (3/5)
- JavaScript
- 回答数5
- ありがとう数4
- みんなの回答 （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>
その他の回答 (4)
- my--
- ベストアンサー率89% (91/102)
>No.3 if (window.event) { //ココ event.cancelBubble = true; event.returnValue = false; } さっそくだけど、バグあったorz 失礼しやした。
補足
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)
探せばありそな気はしますが。。。 上方向スクロールしか対応できてませんです。 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)
＞ 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
お礼
始めての質問で、サイトの使い方が不慣れで、お礼が遅れました。このたびは、ありがとうごさいました。
補足
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)
javascriptの指定 function ptop(){scrollTo(0,0);s_ct=0;} ■html側： <a href="javascript:ptop()">Top</a> Topをクリックするとページ先頭にスムーズに移動しますが。 scrollTo(0,99999) 99999等大きな数字を指定するとページの最後に飛びますが
お礼
始めて質問したので、サイトの使い方が不慣れで、すみません。ありがとうございました。
補足
k0021さん、 早速のご回答ありがとうございます。 頂いた、scriptをそのまま使用し、IE8、Firefox、GoogleChromeの３つで試しました。 【結果】 いずれも、トップに移動はしますが、、<a href="javascript:window.scroll(0,0)">Top</a>と変わらず、一瞬のうちに、ページトップに移動します。 【追加の質問】 ・s_cnt=0;は何かのカウンタだと思うのですが、これは、このスクリプトの中で、どういう役割を持っているのでしょうか？ ・頂いたスクリプトに、何を追加すれば、ページトップへスムーズに移動するのか、まだ、理解出来てませんので、引き続き、ご教授をお願い申し上げます。
お礼
my--さん、 早い、ご教授ありがとうございました。 function pageTop() { O().scrollUp({}, 0); } これで、アンカータグ使用しなくても、ページトップにスムーズに移動してくれました！ Flashが一番長く、その次にPHPで、javascriptは、サブウィンドウ開く位しか使ったことなかったので、今回は、大変、勉強になり、javascriptの奥深さに気付かされました。 おかげ様で、javascriptをちゃんと勉強するように、決意できました。ありがとうございました。