- ベストアンサー
ページ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 色々検索しましたが、それらしきものが見つからず困っております。 どうぞ、よろしくお願いします。
- testid
- お礼率77% (41/53)
- JavaScript
- 回答数9
- ありがとう数13
- みんなの回答 （9）
- 専門家の回答
質問者が選んだベストアンサー
ふぇ～どあうとするやつもくみこんだじょ！ <!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>
その他の回答 (8)
- babu_baboo
- ベストアンサー率51% (268/525)
htmlのふった～のうしろに、えれべーたをていぎするとか。 zIndexで、てまえにせっていするとか。 ふった～のoffsetTopをさかのぼってしらべて、 それより、pointerYがおおきくならないようにするとか。 そのぺーじの、かくようそのたかさが、ぜったいにへんかしないなら すうちをきめうちして、pointerYをそれいじょう、 ふやさないようにするとか。 ふった～のなかに、topへをさりげなくおくとか。 そもそも、すくりぷとがうごかないこともかんがえて たぐをこうせいするべきだじょ！ そういっても、すくりぷとのなかをこめんとあうとしない おれもわるいのだけれど・・・
お礼
ご回答ありがとうございます。 とりあえず、pointeYがフッタのoffsetTopよりも大きくならないように やってみようかと思います。 ながながとありがとうございました。
- babu_baboo
- ベストアンサー率51% (268/525)
＞質問しておけばよかったと後悔 --- × いらいしておけば --- ○ しらべる「き」があれば、きっとわかる！ ばぶっ！ parentNode と offsetLeft
お礼
何度も何度もご回答ありがとうございました。 ヒントのおかげで、ほとんど思ったとおり実装することができました。 本当にありがとうございました。 最後にご迷惑ついでにもう一つだけわからないことがあります。 var offsetY = D.clientHeight - t.offsetHeight -50; ここでトップへ戻るボタンが常にブラウザの下から50pxにいるように 指定してると思うんですが。 フッタが見えてきてしまうとフッタにかぶってしまいます。 メインコンテナよりも下には移動しないということはできるでしょうか？ -50の部分をフッタにかからないよう、-250などにして思ったとおりには できたのですが、途中まではブラウザの下から50px フッタが見えたら250pxのように。。。 offsetYが親要素のbottom以下になったら250を足す。。。のようにすればいいのでしょうか？
- babu_baboo
- ベストアンサー率51% (268/525)
var pointerX = /*@if (@_jscript) D.scrollLeft @else@*/ window.pageXOffset /*@end@*/ + offsetX; が、めざすぽいんとなので、これをかえる。 そのメインぶぶんのりょういきの、 ひだりからのいち＋そのりょういきのはば＝そのざひょう だじょ！
お礼
すばやいご回答ありがとうございます！ うれしいかぎりです。 なるほど。個々の部分で領域と幅を決めるわけですね。 本当にありがとうございます。 でも私自身、もっとちゃんと質問しておけばよかったと後悔しております。 というのも、メイン領域はブラウザの中央に常に表示するように marginが右と左がautoになっています。 正確には全体のページが中央寄せなのですが・・・。 というわけで、左からの位置が常に変動するようになっています。 うーんと 左からの位置の最小が970pxでそれ以下は左に移動せず ウィンドウサイズを広げるごとに左からの位置が増えていくというのは 可能でしょうか？
- think49
- ベストアンサー率59% (285/482)
以下、未検証ですが参考までに。 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イベントに引っかけているのかな？
お礼
ご回答ありがとうございます。 positionを使ってbottomを指定すると可能ではありますが ウィンドウサイズが小さい方、大きい方で挙動がかなりずれることが 問題になってしまいました。 ウィンドウサイズが小さく、特にスクロールが上部にある場合、メインコンテナより上にTOPへ戻るボタンがきてしまい。 見栄えが悪いのです。 参考サイトのTOPの値を変更するスクリプトを色々と検証してはいますが なかなか実装できないで困っております。 回答ありがとうございました。
- babu_baboo
- ベストアンサー率51% (268/525)
だれか～きれいに、なおかつ、かくじつに、げんそくする あるごりずむ、しらなかいかな～？ ばぶ。 <!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>
お礼
なんどもご回答ありがとうございます。 上にお礼致しました通り、挙動が少しずれてしまいました。 質問では「ブラウザの」と書いてしまいましたので babu_baboo様の回答ソースはすばらしいと思います。 もう少し質問を先延ばしにして見る事に致します。 ありがとうございました。
- babu_baboo
- ベストアンサー率51% (268/525)
さすがに、きんぎょすくいを、つくるきはないけど、これぐらいなら こんあいだつくったのでかんたんだじょ！ ださくをかいぞうしたから、もっとださくになったかも^^; ぜんかくのくうはくは、てきとうになおしてね。 ばぶぅ～！ <!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>
お礼
ありがとうございます。 大変参考になりましたが、ブラウザウィンドウサイズを変更したり 例えばIE６ならばお気に入りを再度に出した場合 挙動がおかしくなってしまいました。 ソースまで記述していただきありがとうございました。
- fujillin
- ベストアンサー率61% (1594/2576)
No1です。 ＞フッターは別に用意してありフッターにアンカーリンクを設けるのは ＞現状ではできませんでしたので No1の回答で言いたかったのは、アンカーをフッターの中に入れるということではなく、フッターを下部固定で表示させているCSSの手法を利用すればいかがでしょうかということです。 アンカーはフッターに必要な要素ではないのでしょうから、フッター内に入れる必要はなく（むしろ入れない方が良い）、別にアンカーとしてマークアップすればよいですが、その位置の指定を下部固定にしてあげればよいのではないのでしょうか？ もしも、既にあるというフッターも下部固定になっているとするならば、アンカーとフッターが重なることになります。 （これはスクリプトで実現しても、CSSで実現しても、手法に関係なく重なると言う結果は同じ） それなので、常に重なるものをどのように表示しておくのかということも決めておかなくてはなりませんね。 （例えば、左右に分けるとか、あるいは常にアンカーが重なりの上にあるとか…） それも合わせて、CSSで指定しておけば良いだけでは？ スクリプトでやっても、結果は同じことだと思いますが…？
お礼
回答ありがとうございます。 私の勉強不足で前回及び今回の回答の意味が理解できませんでした 申し訳ありません。 ただ、CSSの手法については CSSのposition:fixedを使いjavascriptでIE6にも対応させ 似たようなことをやりましたが ページ下部まで来ると既にあるフッターに重なり見栄えが悪く なってしまいました。 質問に挙げた、参考サイトでは、ページ下部のフッターの範囲までは アンカーリンク自体が下に降りないようになっていましたので どうやって実装するのか質問した次第でございます。
- fujillin
- ベストアンサー率61% (1594/2576)
スクリプトではありませんが… 普通にフッターを下部に表示するのと同じ手法ではダメなのでしょうか？ http://css.webcreativepark.net/tips11
お礼
ご回答ありがとうございます。 しかし、フッターは別に用意してあり フッターにアンカーリンクを設けるのは現状ではできませんでしたので 質問した次第です。 しかし貴重なご意見ありがとうございました！
お礼
感覚が空いてしまい、申し訳ありません。 ご回答ありがとうございました。 とてもすばらしいスクリプトです。 ただ、私のサイトでは参考サイトと同じように メインコンテナのボディがあり、そのコンテナを基準として TOPへ戻るボタンがくっついてくるようにしたいのです。 babu_baboo様のスクリプトを実装してみると ウィンドウを基準としていますので、ウィンドウが メインコンテナよりも小さくなったりする場合 コンテナ内にボタンが入ってしまうという現象がおきてしまいました。 やはり、なかなか難しい技術なのでしょうか・・・。 何度もご回答ありがとうございました。