• ベストアンサー

ページTOPへ戻るボタンを常にブラウザの右下についてくるようにするには？

こちらではいつも大変お世話になっています。 今回もjavascriptについてまったくわからないので ヒントor参考サイトや、良ければ、実際のソースなどを 教えていただきたく、質問させていただきました。 ページ内リンクにて、ページの先頭に戻るボタンを押し ページTOPにアンカーリンクさせる場合についてですが 下記参考サイトのように常に右下にPAGE TOPというボタンがあり ブラウザの縦スクロールを移動させても それにくっついて移動するようなボタンを設置したいと思っています。 参考サイト http://r2.hangame.co.jp/playguide.nhn?m=pg01_01 http://ksnst.hangame.co.jp/playguide/playguide02_01.nhn 色々検索しましたが、それらしきものが見つからず困っております。 どうぞ、よろしくお願いします。

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

  • ベストアンサー
回答No.6

ふぇ～どあうとするやつもくみこんだじょ！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <title>はじっこにいすわる3</title> <style type="text/css"> #a { height:3000px; } </style> <div id="a"></div> <div id="menu1"> <a href="#top">Top</a></div> <script type="text/javascript"> //@cc_on function Decorator (alpha) { 　//@ this.filter = 'Alpha(opacity=' + alpha + ')'; 　this.opacity = alpha / 100 + ''; } function Locator (x, y) { 　this.left = x + 'px'; 　this.top = y + 'px'; } function Starter (callbackfn) { 　this.timerID = (function (o) { 　　return setInterval(function () { return callbackfn.call(o); }, o.interval); 　})(this); } //___ Elevator = function (eId, m_sec) { 　var e = document.getElementById(eId); 　var s = e.style; 　this.interval = m_sec; 　this.target = e; 　s.position = 'absolute'; 　Locator.call(s, e.offsetLeft, e.offsetTop); 　Starter.call(this, this.handrer); }; Elevator.prototype.handrer = (function (D) { 　return function () { 　　var t = this.target; 　　var offsetX = D.clientWidth - t.offsetWidth; 　　var offsetY = D.clientHeight - t.offsetHeight -50; 　　var pointerX = /*@if (@_jscript) D.scrollLeft @else@*/ window.pageXOffset /*@end@*/ + offsetX; 　　var pointerY = /*@if (@_jscript) D.scrollTop @else@*/ window.pageYOffset /*@end@*/ + offsetY; 　　var x = t.offsetLeft+((pointerX - t.offsetLeft)>>2); 　　var y = t.offsetTop+((pointerY - t.offsetTop)>>2); 　　var op = y - offsetY; 　　if (op>0) Decorator.call(t.style,op>100?100:op); 　　Locator.call (t.style, x, y); 　}; })(document[document.compatMode == 'CSS1Compat' ? 'documentElement' : 'body']); //____ new Elevator('menu1', 50); </script>

testid
質問者

お礼

感覚が空いてしまい、申し訳ありません。 ご回答ありがとうございました。 とてもすばらしいスクリプトです。 ただ、私のサイトでは参考サイトと同じように メインコンテナのボディがあり、そのコンテナを基準として TOPへ戻るボタンがくっついてくるようにしたいのです。 babu_baboo様のスクリプトを実装してみると ウィンドウを基準としていますので、ウィンドウが メインコンテナよりも小さくなったりする場合 コンテナ内にボタンが入ってしまうという現象がおきてしまいました。 やはり、なかなか難しい技術なのでしょうか・・・。 何度もご回答ありがとうございました。

その他の回答 (8)

回答No.9

htmlのふった～のうしろに、えれべーたをていぎするとか。 zIndexで、てまえにせっていするとか。 ふった～のoffsetTopをさかのぼってしらべて、 それより、pointerYがおおきくならないようにするとか。 そのぺーじの、かくようそのたかさが、ぜったいにへんかしないなら すうちをきめうちして、pointerYをそれいじょう、 ふやさないようにするとか。 ふった～のなかに、topへをさりげなくおくとか。 そもそも、すくりぷとがうごかないこともかんがえて たぐをこうせいするべきだじょ！ そういっても、すくりぷとのなかをこめんとあうとしない おれもわるいのだけれど・・・

testid
質問者

お礼

ご回答ありがとうございます。 とりあえず、pointeYがフッタのoffsetTopよりも大きくならないように やってみようかと思います。 ながながとありがとうございました。

回答No.8

＞質問しておけばよかったと後悔　--- × いらいしておけば --- ○ しらべる「き」があれば、きっとわかる！　ばぶっ！ parentNode と offsetLeft

testid
質問者

お礼

何度も何度もご回答ありがとうございました。 ヒントのおかげで、ほとんど思ったとおり実装することができました。 本当にありがとうございました。 最後にご迷惑ついでにもう一つだけわからないことがあります。 var offsetY = D.clientHeight - t.offsetHeight -50; ここでトップへ戻るボタンが常にブラウザの下から50pxにいるように 指定してると思うんですが。 フッタが見えてきてしまうとフッタにかぶってしまいます。 メインコンテナよりも下には移動しないということはできるでしょうか？ -50の部分をフッタにかからないよう、-250などにして思ったとおりには できたのですが、途中まではブラウザの下から50px フッタが見えたら250pxのように。。。 offsetYが親要素のbottom以下になったら250を足す。。。のようにすればいいのでしょうか？

回答No.7

var pointerX = /*@if (@_jscript) D.scrollLeft @else@*/ window.pageXOffset /*@end@*/ + offsetX; が、めざすぽいんとなので、これをかえる。 そのメインぶぶんのりょういきの、 ひだりからのいち＋そのりょういきのはば＝そのざひょう　だじょ！

testid
質問者

お礼

すばやいご回答ありがとうございます！ うれしいかぎりです。 なるほど。個々の部分で領域と幅を決めるわけですね。 本当にありがとうございます。 でも私自身、もっとちゃんと質問しておけばよかったと後悔しております。 というのも、メイン領域はブラウザの中央に常に表示するように marginが右と左がautoになっています。 正確には全体のページが中央寄せなのですが・・・。 というわけで、左からの位置が常に変動するようになっています。 うーんと 左からの位置の最小が970pxでそれ以下は左に移動せず ウィンドウサイズを広げるごとに左からの位置が増えていくというのは 可能でしょうか？

  • think49
  • ベストアンサー率59% (285/482)
回答No.5

以下、未検証ですが参考までに。 OTCHY.NET » css による疑似フレーム IE6 標準準拠モード完全対応版 (CSS ハック / JavaScript未使用) http://www.otchy.net/20090519/frame-like-css-layout-for-ie6/ IE6 position:fixed の諸問題を解決する jQuery.exFixed.js - Cyokodog::Diary http://d.hatena.ne.jp/cyokodog/20090323/jQueryExFixed > CSSのposition:fixedを使いjavascriptでIE6にも対応させ似たようなことをやりましたが > ページ下部まで来ると既にあるフッターに重なり見栄えが悪くなってしまいました。 position を使っているわけですから、bottom: 20px; など指定して最下部からの距離を指定してするのはどうでしょうか？ ちなみに、参考サイトのJavaScriptですが、 <div id="extraPageTop" style="top: 412px; position: absolute; opacity: 1; display: block;"> <a href="#wrapper"><img height="11" width="49" alt="PAGETOP" src="http://images.hangame.co.jp/hangame/core/r2/common/btn_pagetop.gif"/></a> </div> のようなHTMLを生成して、スクロールする毎に top の値を変更しているようです。 scrollイベントに引っかけているのかな？

testid
質問者

お礼

ご回答ありがとうございます。 positionを使ってbottomを指定すると可能ではありますが ウィンドウサイズが小さい方、大きい方で挙動がかなりずれることが 問題になってしまいました。 ウィンドウサイズが小さく、特にスクロールが上部にある場合、メインコンテナより上にTOPへ戻るボタンがきてしまい。 見栄えが悪いのです。 参考サイトのTOPの値を変更するスクリプトを色々と検証してはいますが なかなか実装できないで困っております。 回答ありがとうございました。

回答No.4

だれか～きれいに、なおかつ、かくじつに、げんそくする あるごりずむ、しらなかいかな～？ ばぶ。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <title>はじっこにいすわる２</title> <style type="text/css"> #a { height:3000px; } </style> <div id="a"></div> <div id="menu1"><a href="#top">Top</a></div> <script type="text/javascript"> //@cc_on function Locator (x, y) { 　this.left = x + 'px'; 　this.top　= y + 'px'; } function Starter (callbackfn) { 　this.timerID = (function (o) { 　　return setInterval(function () { return callbackfn.call(o); }, o.interval); 　})(this); } //___ Elevator = function (eId, m_sec) { 　var e = document.getElementById(eId); 　var s = e.style; 　this.interval = m_sec; 　this.target = e; 　s.position = 'absolute'; 　Locator.call(s, e.offsetLeft, e.offsetTop); 　Starter.call(this, this.handrer); }; Elevator.prototype.handrer = (function (D) { 　return function () { 　　var t = this.target; 　　var offsetX = D.clientWidth - t.offsetWidth; 　　var offsetY = D.clientHeight - t.offsetWidth; 　　var pointerX = /*@if (@_jscript) D.scrollLeft @else@*/ window.pageXOffset /*@end@*/ + offsetX; 　　var pointerY = /*@if (@_jscript) D.scrollTop　@else@*/ window.pageYOffset /*@end@*/ + offsetY; 　　var x = t.offsetLeft+(1+(pointerX - t.offsetLeft)>>2); 　　var y = t.offsetTop+(1+(pointerY - t.offsetTop)>>2); 　　Locator.call (this.target.style, x, y); 　}; })(document[document.compatMode == 'CSS1Compat' ? 'documentElement' : 'body']); //____ new Elevator('menu1', 50); </script>

testid
質問者

お礼

なんどもご回答ありがとうございます。 上にお礼致しました通り、挙動が少しずれてしまいました。 質問では「ブラウザの」と書いてしまいましたので babu_baboo様の回答ソースはすばらしいと思います。 もう少し質問を先延ばしにして見る事に致します。 ありがとうございました。

回答No.3

さすがに、きんぎょすくいを、つくるきはないけど、これぐらいなら こんあいだつくったのでかんたんだじょ！ ださくをかいぞうしたから、もっとださくになったかも^^; ぜんかくのくうはくは、てきとうになおしてね。 ばぶぅ～！ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <title>はじっこにいすわる</title> <style type="text/css"> #a { height:3000px; } </style> <div id="a"> 　<div id="menu1"><a href="#top">Top</a></div> </div> <script type="text/javascript"> //@cc_on var D = document[document.compatMode == 'CSS1Compat' ? 'documentElement' : 'body']; function Locator (x, y) { 　this.left = x + 'px'; 　this.top　= y + 'px'; } //___ function Starter (callbackfn) { 　this.timerID = (function (o) { 　　return setInterval(function () { return callbackfn.call(o); }, o.interval); 　})(this); } function Timer () { 　this.timerID = null; } Timer.prototype.start = function (listener) { 　return Starter.call(this, listener); }; //___ Elevator = function () { 　this.Initializer.apply(this, arguments); }; Elevator.prototype = new Timer; Elevator.constructor = Elevator; Elevator.prototype.Initializer = function (node, delay, m_sec) { 　var s = node.style; 　this.delay = delay; 　this.interval = m_sec; 　this.target = node; 　s.position = 'absolute'; 　Locator.call(s, node.offsetLeft, node.offsetTop); 　this.offsetX = D.clientWidth - node.offsetWidth; 　this.offsetY = D.clientHeight - node.offsetWidth; }; Elevator.prototype.mover = function () { 　var t = this.target; 　var pointerX = /*@if (@_jscript) D.scrollLeft @else@*/ window.pageXOffset /*@end@*/ + this.offsetX; 　var pointerY = /*@if (@_jscript) D.scrollTop　@else@*/ window.pageYOffset /*@end@*/ + this.offsetY; 　var saX = ((pointerX - t.offsetLeft) / this.delay|0); 　var saY = ((pointerY - t.offsetTop) / this.delay|0); 　Locator.call (this.target.style,　t.offsetLeft + saX,　t.offsetTop + saY); }; Elevator.create = function (node, delay, m_sec) { 　var e = new this (node, delay || 10, m_sec || 10); 　e.start(e.mover); }; //____ Elevator.create(document.getElementById('menu1'), 5, 30); </script>

testid
質問者

お礼

ありがとうございます。 大変参考になりましたが、ブラウザウィンドウサイズを変更したり 例えばIE６ならばお気に入りを再度に出した場合 挙動がおかしくなってしまいました。 ソースまで記述していただきありがとうございました。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

No1です。 ＞フッターは別に用意してありフッターにアンカーリンクを設けるのは ＞現状ではできませんでしたので No1の回答で言いたかったのは、アンカーをフッターの中に入れるということではなく、フッターを下部固定で表示させているCSSの手法を利用すればいかがでしょうかということです。 アンカーはフッターに必要な要素ではないのでしょうから、フッター内に入れる必要はなく（むしろ入れない方が良い）、別にアンカーとしてマークアップすればよいですが、その位置の指定を下部固定にしてあげればよいのではないのでしょうか？ もしも、既にあるというフッターも下部固定になっているとするならば、アンカーとフッターが重なることになります。 （これはスクリプトで実現しても、CSSで実現しても、手法に関係なく重なると言う結果は同じ） それなので、常に重なるものをどのように表示しておくのかということも決めておかなくてはなりませんね。 （例えば、左右に分けるとか、あるいは常にアンカーが重なりの上にあるとか…） それも合わせて、CSSで指定しておけば良いだけでは？ スクリプトでやっても、結果は同じことだと思いますが…？

testid
質問者

お礼

回答ありがとうございます。 私の勉強不足で前回及び今回の回答の意味が理解できませんでした 申し訳ありません。 ただ、CSSの手法については CSSのposition:fixedを使いjavascriptでIE6にも対応させ 似たようなことをやりましたが ページ下部まで来ると既にあるフッターに重なり見栄えが悪く なってしまいました。 質問に挙げた、参考サイトでは、ページ下部のフッターの範囲までは アンカーリンク自体が下に降りないようになっていましたので どうやって実装するのか質問した次第でございます。

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

スクリプトではありませんが… 普通にフッターを下部に表示するのと同じ手法ではダメなのでしょうか？ http://css.webcreativepark.net/tips11

testid
質問者

お礼

ご回答ありがとうございます。 しかし、フッターは別に用意してあり フッターにアンカーリンクを設けるのは現状ではできませんでしたので 質問した次第です。 しかし貴重なご意見ありがとうございました！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ページトップへスクロール

    webページをスクロールしていくと最後に「ページトップへ」のようなリンクがあって、クリックするとスクロールしてページトップでゆっくり止まるjavaを使用しているんですが、javaをオフにしているユーザーのために、同じリンクボタンで普通のアンカーでトップページに切り替わる（name属性を使った方法）のも併用したいのですがどうすれば良いのでしょうか。 リンク部分のソースはこれです。 <a href="javascript:pageup()">pagetop</a>

  • こちらのサイトのトップページの作り方

    こちらのサイトを参考にしながらサイトを作っています。 トップから下にスクロールしていくと２ページ目（実際はサイトの縦長シングルページですので２ページ目というのはありませんが）で白い背景のトップメニューがふわっとでてきます。 そして最後のページまでトップメニューがついてきます。 これはどのように実装しているのでしょうか？ jQuery,javascriptにお詳しい方、もしよろしければご教授お願いいたします。 http://www.trailspring.org/#about

  • スクロールしてページトップへ

    「ページトップへ」のようなリンクがあって、クリックするとスクロールしてページトップでゆっくり止まるような（参考：http://www.endoritsuco.com/disc.html、http://www.mienai.com/about_orthodontics/index.html等）javacsriptを探しています。 javascriptは初心者なので、どこかでスクリプトを配布してたりすると嬉しいのですが。 書籍でも構いませんので情報をいただければと思います。

  • ホームページ　常にトップページが表示される。

    ホームページビルダーVer.13で会社のホームページを作成しました。 アップが終わり、google等で色々検索してみたところ、 ヒットはするものの検索内容に関係なく、常にトップ(index.html)を表示します。 出来れば、検索内容にあったページを直に開くようにしたいのですが、 どうすればよいでしょうか？ （例えば、検索項目を「(株)あああ　採用」とした場合、採用のページを直に開きたい） サイトの構造としては、フレームは使用しておらず、 トップページ以下全てのページに相互リンク（ボタン）を張っています。 リンクはファイル名を指定して設定しています。 こんな感じです。 index.html（トップページ）　…　会社情報ページへリンクのボタンを配置 　　　　　　　　　　　　　　　　採用情報ページへリンクのボタンを配置 information.html（会社情報ページ）　…　トップページへリンクのボタンを配置 　　　　　　　　　　　　　　　　　　　　採用情報ページへリンクのボタンを配置 recruit.html（採用情報ページ）…　トップページへリンクのボタンを配置 　　　　　　　　　　　　　　　　　会社案内ページへリンクのボタンを配置 リンクの張り方をファイル名の指定からURLの指定に変更すればよいのか、 それともそれぞれ別のサイトに分け、すべてのページをindexにし、URLでリンクを張ればよいのか、 色々考えましたが解決に至っていません。 よろしくご指南ください。

  • アンカーテキストのある記事はトップページがいい？

    被リンクサイトのアンカーテキストがある記事は、 トップページに固定した方がいいと聞きました。 つまり、その被リンクサイトに訪れて、すぐにリンクを送っている記事が表示されるということです。 おそらく、 "トップページの方が、すぐにクローリングされる" というような理由だと思います。 個人的には、どちらにしろクローリングされるのだから、 トップページにこだわる必要はないような気もします。 SEOに詳しい方や被リンクサイトを実践している方、 アンカーテキストがある記事をトップページにするのはどう思いますか？ よろしくお願いいたします。

    • 締切済み
    • SEO
  • フレームとトップページとリンクボタン

    トップページに他のサイトへのリンクボタンをつけるとフレームの部分は残って、トップページの中でだけ他のサイトに飛んでしまいます このような不都合を解消するにはどうしたらよいでしょうか？

    • ベストアンサー
    • HTML
  • ページ内アンカーに移動しない：

    ページ内アンカーに移動しない： あるページ"A"に <div id = "TOP"></div>と設定し ページ"B"に <a href="test.html#TOP">test<a> と設定しました。 動作確認をした結果、Firefox・クロムと正常に動くのですが IEが全バージョンで、該当ページに飛ぶのですが、アンカーに 移動しません。 ローカルにてテストをした結果、IEで通常に移動します。 調べた所、 javascript等が使用されているとリンク先ジャンプ後にセキュリティの確認 が有るため、アンカーリンクが消されると書いてあったので javascript部分を全て削除し、動作確認をしたのですが やはりアンカーに飛んでくれません。 どなたか、ご教示ください。

  • x軸にはスクロールしない、ページ内リンクをスムーズにスクロールするスク

    x軸にはスクロールしない、ページ内リンクをスムーズにスクロールするスクリプトを探しています。 こだわりのページ内リンクスムーズスクロール scrollsmoothly.js http://d.hatena.ne.jp/KAZUMiX/20080418/scrollsmoothly などを色々試しまして、同ページ内のリンクはきれいに動くのを確認しました。 サイトはグローバルメニューが左にあり、横幅が広めのデザインです。 問題は、小さい画面閲覧する際、別ページからページ下部のアンカーへ飛んだ場合です。 一旦ページの最上部左に移動してからアンカーへスクロールするため、 斜め下方向へスクロールし、そこからページの先頭へ戻る場合斜め上にスクロールする 動きになります。 クライアントから動きが気持ち悪いというクレームがあったので、 x軸にはスクロールしない方法を探したのですがなかなかうまくいきません。 jQueryのサンプルなど有りましたら教えてください。

  • ページの先頭へスクロールして戻るには

    こんにちは。 HTMLでボディタグ直後に<a name=pagetop"></a>などとしておき、ページの下部において「ページの先頭へ」とか「ページトップ」とか「PAGETOP」とかというリンクを設け、そのリンクをクリックすればページの一番上に戻らせるというHTMLのみでできる方法がありますが、そうでなくて、これをスクロールさせながら戻らせるようにしたいんです。 例えば以下のホームページが実例としてあります。 「ページトップ」という文字をクリックすると上記のようになります。 http://www.yamaha.co.jp/siteusage/index.html もちろん、このサイトのやり方と同じでなくても構いません。よりスマートなソース・やり方で出来ればそれが一番と思います。 JavaScriptは初心者でお恥ずかしいですが、これはぜひとも出来るようになりたいです。頑張ります。 どなたかどうぞ教えてください！ 宜しくお願いいたします。

  • Dreamweaverページリンクの一部がブラウザで表示されない

    お世話になります Dw初心者で今回初めてHP作成しています 各ページにindex（ホーム）へ戻るリンクボタンを作成し クリックしたらホームへ戻れる様になりましたが ブラウザ表示で一部の画像が　赤い×印が出ていて真っ白になっています　各ページからアンカーポイントを使ってページトップへ戻る リンクボタン等はちゃんと戻れるしホームから各ページへの リンクボタンでの移動後はちゃんとブラウザ表示がされます 拙い説明で申し訳ありませんが どなたか対処法がお分かりでしたら教えて下さい 宜しくお願いいたします

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する