ページ先頭にスムーズに移動する方法
- アンカータグを使わずにページ先頭にスムーズに移動する方法を教えてください。
- 試したスクリプトではページごとにスクロール量が異なり、カチカチの動きになってしまいます。
- アンカータグが使えない状況下で、スクロールを滑らかにする方法を教えてください。
- ベストアンサー
ページ先頭にスムーズに移動（アンカータグ不使用）
上記の件、<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）
- 専門家の回答
質問者が選んだベストアンサー
>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;は何かのカウンタだと思うのですが、これは、このスクリプトの中で、どういう役割を持っているのでしょうか？ ・頂いたスクリプトに、何を追加すれば、ページトップへスムーズに移動するのか、まだ、理解出来てませんので、引き続き、ご教授をお願い申し上げます。
関連するQ&A
- 別ページの指定した座標(x.y)へリンクしたい
はじめまして http://okwave.jp/qa/q751783.html で、既に質問されている方とほぼ同じ内容の質問です。 上記質問では一見解決がなされておらず、参考にしたくとも当方でも結局出来ませんでした。 よって、改めて、私の問題点を率直に質問をさせて頂こうと思います。 http://freeeeeze.web.fc2.com/scrollin/scroll.html 上記URL、こちらに、つたないながらうまく行かないで困っているhtmlを置いてあります。 要は、パララックスに興味を持ち「skrollr-master」を素に作り始めましたが ページ内のリンクは「<a onclick="window.scroll(0,1000);" />●●</a>」で解決したのですが、リンクした別ページのページ途中（例えばスクロール量4000の座標）への設定がどうしてもできません。 <SCRIPT language="JavaScript"> <!-- function OpenWin1(){ win=window.open("link01.html","_top"); win.scroll(0,500); } // --> <!-- function OpenWin2(){ win=window.open("link01.html","_top"); win.scroll(0,4000); } // --> <!-- function OpenWin3(){ win=window.open("link02.html","_top"); win.scroll(0,500); } // --> <!-- function OpenWin4(){ win=window.open("link02.html","_top"); win.scroll(0,4000); } // --> </SCRIPT> http://okwave.jp/qa/q751783.htmlで紹介されている内容が使えるかなと思い 上の様なものを真似て書き、 <a href="javascript:OpenWin1()">●●</a> からリンクをとやってみたのですが、うまく行きません。 見よう見まね、パクったり、繋ぎ合わせたり、素人がちょっと無理な事に首を突っ込んで いる感じなのですが、 ペラ１のパララックスを作ってみるという、課題をなんとかクリアしたく、 どうか、お知恵ある方々にアドバイス頂ければと思い質問させて頂く事にしました。 何となく、htmlやcssやjavascriptを使っているレベルです。 今回「bootstrap」も使ってスマホ対応という課題も課してやってみています。 いろいろ、理解をしてやっているのではないので ご面倒かと思いますが、できるだけ噛み砕いてご教示頂けると助かります。 もちろん、htmlを書き直して頂いて示して頂けるに越した事はありません。 何卒、どうか宜しくお願い致します。
- 締切済み
- JavaScript
- onclickでのページ内移動
JavaScriptでページ内移動をしたいのですが HTMLでいうところの <a name="top"></a> <a href="#top"></a> をonclickで動作させたいのですがどうすれば出来ますか。 http://www.htmq.com/js/window_open.shtml で載っているのですが、これは新しいウィンドウを開くでwindow.openのところを変えれば出来ると思いますが どういう風に変えるのでしょうか。よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- 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を勉強し始めたばかりで分からないことだらけで 途方に暮れております。 ご指導よろしくお願いします。
- ベストアンサー
- JavaScript
- ロリポブログで下の部分に流れるメッセージを作りたいのですが、どうしたらいいですか？
ロリポブログで、 <SCRIPT language="JavaScript"> <!-- msg=" ようこそ♪ お気に入りに追加してくださいね！ "; function scroll(){ msg=msg.substring(1,msg.length)+msg.substring(0,1); window.status=msg; setTimeout("scroll()",300); } //--> </SCRIPT> というスクリプトを<head></head>の間に入れてみたのですが、 うまくいきませんでした。 どのようにしたらよいか教えていただけますか？
- ベストアンサー
- JavaScript
- 前のページに戻るとページトップに戻るの併用方法
ホームページのページ内に前のページに戻るボタンとページトップ（同ページの最上部）に戻るボタンの両方をJavaScriptで設置したいのですが、方法がわかりません。 前のページに戻るは <a href="javascript:history.back()">戻る</a> としています。 ページトップ（同ページの最上部）に戻るは <a href="javascript:scrollTo(0,0);undefined;" onclick="return false;">ページトップに戻る</a> としています。 以上の両方を併用する方法を教えていただけないでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- ブラウザの頁内移動についての質問です。
ブラウザの頁内移動についての質問です。 私は現在、Javascript+PHPでSNSアプリを作成しています。 SNSアプリはプラットフォーム（SNS）上のframe内で動作します。 アプリの表示位置移動をwindow.window.scrollToが使用できないので location.hashを使用して行なっているのですが、IEでlocation.hash を使用するとブラウザの戻るボタンが挙動が意図しない動作になります。 オンロード時に以下の処理を実行します。 onload() { location.hash="#PageTop"; // アプリのトップを画面のトップに移動する 以降の処理 } この後、戻るボタンをクリックしても前の頁には戻らす、onload()の処理が 実行されます。 firefox、Chromeなどは前のページに戻ってくれるのですがIEだと 上記のようになり無限ループのような状況になります。 オンロード時に「アプリのトップを画面のトップに移動する」処理は必須であり ますのではずせません。 他に頁内移動する方法か、IEでlocation.hashを設定しても前の頁に戻れる 方法がお分かりの方、お教えいただくと非常に助かります。
- 締切済み
- JavaScript
- ウインドウの後ろに隠れているページを前面に出したいんです。
「呼び出し元ページ」をA 「呼び出されるWINDOWページ」をB と例えます。 「A」のリンクをクリックすると「B」がNEW WINDOWで開き、既に開いている「B」のリンクをクリックすると背面「A」が手前に来るjavascriptに挑戦しているのですが、うまく動作しないんです。 逆の順序「B」→「A」→「B」もです。 WIN IE6.0では成功しましたが、FIREFOX、ネスケ、Mac safariの最新verではダメでした。 すみません、誰か教えて頂けないでしょうか。 現在「A」「B」のページには下記の記述をしてます。 IEでは大丈夫でした。 別の方法でも良いのでお願いします。 ■「呼び出し元ページA、test1.com」 <script language="javascript"> <!-- window.focus(); //--> </script> <A href=http://www.test2.com/ target=test>リンク</A> ■「呼び出されるWINDOWページB、test2.com」 <script language="javascript"> <!-- window.focus(); //--> </script> <A href=http://www.test1.com/ target=test>リンク</A>
- ベストアンサー
- JavaScript
- ページの先頭へスクロールして戻るには
こんにちは。 HTMLでボディタグ直後に<a name=pagetop"></a>などとしておき、ページの下部において「ページの先頭へ」とか「ページトップ」とか「PAGETOP」とかというリンクを設け、そのリンクをクリックすればページの一番上に戻らせるというHTMLのみでできる方法がありますが、そうでなくて、これをスクロールさせながら戻らせるようにしたいんです。 例えば以下のホームページが実例としてあります。 「ページトップ」という文字をクリックすると上記のようになります。 http://www.yamaha.co.jp/siteusage/index.html もちろん、このサイトのやり方と同じでなくても構いません。よりスマートなソース・やり方で出来ればそれが一番と思います。 JavaScriptは初心者でお恥ずかしいですが、これはぜひとも出来るようになりたいです。頑張ります。 どなたかどうぞ教えてください！ 宜しくお願いいたします。
- 締切済み
- JavaScript
- JavaScriptを使用したページなのですが
JavaScriptを使って窓サイズ指定のwindowを開くページなのですが、 私のPCでは問題なく開けるのですが他の人のPCでは見れないという指摘を頂きました。 私が見ている環境はIE6・WindowsXP・セキュリティレベル中です。製作ソフトはDreamWeaverを使っています。 他の人の環境がいまいちよく分からないのですがJavaを使ったらどういった環境の人が見れなくなるのでしょうか？ ちなみにそのページで使用したタグは <script language="JavaScript" type="text/JavaScript"> <!-- function MM_openBrWindow(theURL,winName,features) { //v2.0 window.open(theURL,winName,features); } //--> </script> が<head></head>に入っており<body></body> には <a href="javascript:;" onClick="MM_openBrWindow(profile.htm','prowin','scrollbars=yes,width=600px,height=600px')">です。 よろしくお願いします。
- ベストアンサー
- ネットワーク
- パララックスページスクロールについて
こんにちは。 下記のコードはJQUERYコードをコピペしたもので、ド素人です。 ナビをクリックすると、各コンテンツBOXにいきますが、下のコードだとTOPの一番上まで来てしまいます、 クリック→ページトップから下へ85pxのところに来るように設定したいのですが。 ＝＝＝＝＝＝＝＝javascript＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <script> //スムーススクロール 各コンテンツbox// $(function() { $(".scroll").click(function(event){ event.preventDefault(); var url = this.href; var parts = url.split("#"); var target = parts[1]; var target_offset = $("#"+target).offset(); var target_top = target_offset.top; $('html, body').animate({scrollTop:target_top}, 1200); }); }); </script> ==＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝HTML=====＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <nav> <ul id="dropmenu"> <li><a href="#top" class="scroll">Top</a></li> <li><a href="#introduce" class="scroll">薬膳レシピとは</a></li> <li><a href="#basictypecheck" class="scroll">基本体質のチェック</a></li> <li><a href="#typedescription" class="scroll">気・血・水について</a></li> <li><a href="#mix" class="scroll">混合タイプの特徴</a></li> <li><a href="#notfeelingcheck" class="scroll">不調の原因チェック</a> <li><a href="#Profile" class="scroll">Profile</a></li> <li><a href="#Lesson" class="scroll">Lesson</a></li> </ul> </nav> ==＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝=====＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 他にもコードが必要であれば、ご教示いただければ補足します。 どうぞ宜しくお願い致します。
- 締切済み
- JavaScript
お礼
my--さん、 早い、ご教授ありがとうございました。 function pageTop() { O().scrollUp({}, 0); } これで、アンカータグ使用しなくても、ページトップにスムーズに移動してくれました！ Flashが一番長く、その次にPHPで、javascriptは、サブウィンドウ開く位しか使ったことなかったので、今回は、大変、勉強になり、javascriptの奥深さに気付かされました。 おかげ様で、javascriptをちゃんと勉強するように、決意できました。ありがとうございました。