一番上へ移動するスクリプト

このQ&Aのポイント
  • CSSをいじればいいのでしょうか?
  • ボタンが画像のようにデフォルトで下の方へ表示されてしまいます。
  • 赤丸で囲った部分に表示させたいのですが
回答を見る
  • ベストアンサー

一番上へ移動するスクリプト

今 ------------------------- @charset "UTF-8"; #page-top{width:50px;height:50px;display:none;position:fixed;right:16px;bottom:16px; } #page-top p{margin:0;padding:0;text-align:center;background: #3b3b3b;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;transition:all 0.3s; } #page-top p:hover{background:#8b8b8b; } #move-page-top{color:#fff;line-height:50px;text-decoration:none;display:block;cursor:pointer; } ------------------------- というcssのコードで一番上へ移動するスクリプトを設置しているのですが ボタンが画像のようにデフォルトで下の方へ表示されてしまいます。 赤丸で囲った部分に表示させたいのですが CSSをいじればいいのでしょうか? それともjsの方をいじればいいのでしょうか?

  • CSS
  • 回答数1
  • ありがとう数1

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

  • ベストアンサー
  • oshikota
  • ベストアンサー率16% (11/67)
回答No.1

htmlとjsがないので、正確にお答えできるかわかりませんが、 #page-top に指定されている bottom:16px; の値を増やすと位置が上に行くかと思います。 おっしゃっている意味と違いましたらすみません。

KPITLHFK
質問者

お礼

回答ありがとうございました。

関連するQ&A

  • CSSのツールチップにアニメーションをつける方法

    CSSだけでマウスホバー時にツールチップを表示しています。 以下のように記述することで、ホバー時にツールチップが出るようになったのですが、アニメーションをつけたいと思っています。 HTML ============ <a href='#' class='tooltip'>用語<span>用語の説明</span></a> ============ CSS ============ a:hover {background:#f7f7f7; text-decoration:none;} a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:200px;} a.tooltip:hover span{display:inline; position:absolute; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c;} ============ ただ、実際にホバーするのは、ホバー時に表示する文字ではないので、どこにtransitionを記述すればいいかわかりませんでした。 こういう場合、どこにtransitionを追加してあげれば、ホバー時にアニメーションを追加できるのでしょうか? 以下のセレクタは試してみましたが、ホバー時にアニメーションはつきませんでした。 .tooltip{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } .tooltip span{ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } ご教示いただけると幸いです。 よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • monacaで使うcssの釦の色を変えたい

    現在monacaのiOSのアプリ作成の練習しています。掲載したようなボタンのCSSを並べてみました。 <a class="button--large" href="mentenance_index.html">テスト1</a> <a class="button--large" href="mentenance_index.html">テスト2</a> <a class="button--large" href="mentenance_index.html">テスト3</a> このときにこのボタンの色を変えたいと思うのですが、 "css/style.css" このファイルのbutton--largeクラスのどの部分を修正すれば色は変わりますでしょうか? ちなみに、 .button--large { .....(中略)...... background-color: #1284ff; .....(中略)...... } この部分だと自分は思い、 background-color: #00008b;  というダークブルーのような設定に変更してiphoneでデバッグしてみたのですが、色が変わってくれませんでした。 この button02--large クラスの内容も掲載させて頂きます。 どうぞ、ご教示の程よろしくお願い致します。 .button--large { text-align: center; position: relative; display: inline-block; vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-background-clip: padding-box; background-clip: padding-box; padding: 0; margin: 0; font: inherit; color: inherit; background: transparent; border: none; font-family: 'Helvetica Neue', Helvetica, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; height: auto; text-decoration: none; padding: 4px 20px; font-size: 16px; line-height: 36px; letter-spacing: 0; color: #fff; text-shadow: 0 1px none; vertical-align: middle; background-color: #1284ff; -webkit-box-shadow: none; box-shadow: none; border: none; -webkit-border-radius: 4px; border-radius: 4px; -webkit-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; -moz-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; -o-transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; transition: background-color 0.2s linear, color 0.2s linear, opacity 0.2s linear; font-weight: 400; font-size: 16px; font-weight: 500; line-height: 36px; padding: 4px 20px; display: block; width: 100%; } .button--large:active { background-color: #1284ff; -webkit-box-shadow: none; box-shadow: none; color: #fff; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; opacity: 0.6; -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .button--large:disabled { opacity: 0.3; cursor: default; pointer-events: none; } .button--large:hover { -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none; } .button--large:focus { -webkit-box-shadow: none; box-shadow: none; outline: 0; }

    • ベストアンサー
    • CSS
  • 一番上へ移動のマークを表示するにはどうすればいい?

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script> </head> <style type="text/css"> .page-top { margin: 0 ; padding: 0 ; } .page-top p { margin: 0 ; padding: 0 ; position: fixed ; right: 16px ; bottom: 16px ; } .move-page-top { display: block ; background: #D36015 ; width: 50px ; height: 50px ; color: #fff ; line-height: 50px ; text-decoration: none ; text-align: center ; -webkit-transition:all 0.3s ; -moz-transition:all 0.3s ; transition:all 0.3s ; } .move-page-top:hover { opacity: 0.85 ; } </style> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://自分のサイト.web.fc2.com/to-top/to-top.js"></script> <div id="page-top" class="page-top"> <p><a id="move-page-top" class="move-page-top">▲</a></p> </div> <div data-role="page"> <div data-role="header"> <h1>jQuery Mobile</h1> </div> <div role="main" class="ui-content"> <ul data-role="listview"> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> <li>test1</li> <li>test2</li> </ul> </div> <div data-role="footer"> </div> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html> これだと一番上へ移動が表示されません。 しかし、 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>jQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script> </head> <style type="text/css"> .page-top { margin: 0 ; padding: 0 ; } .page-top p { margin: 0 ; padding: 0 ; position: fixed ; right: 16px ; bottom: 16px ; } .move-page-top { display: block ; background: #D36015 ; width: 50px ; height: 50px ; color: #fff ; line-height: 50px ; text-decoration: none ; text-align: center ; -webkit-transition:all 0.3s ; -moz-transition:all 0.3s ; transition:all 0.3s ; } .move-page-top:hover { opacity: 0.85 ; } </style> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://自分のサイト.web.fc2.com/to-top/to-top.js"></script> <div id="page-top" class="page-top"> <p><a id="move-page-top" class="move-page-top">▲</a></p> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br> </body> </html> これにすると表示されます。 data-roleとの相性が悪いのでしょうか? data-roleを使いつつ、一番上へ移動のマークを表示するにはどうすればいいですか?

  • CSS3でIE9対応のtransition

    以下のようにCSS3でマウスオーバー時に だんだんと右に動くようにしたいのですが 何か方法はありませんでしょうか? WEBで探してみたのですが、対応方法が見つかりませんでした。 なにとぞよろしくお願いいたします。 .cover { background:gray; width:180px; height:100px; position:absolute; top:0; -moz-transition:left 0.3s ease; -webkit-transition:left 0.3s ease; transition:left 0.3s ease; } .slideleft .cover { left:0px; } .slideleft:hover .cover { left:120px; }

    • ベストアンサー
    • CSS
  • transitionがうまく反映されないです

    すみません、ご教示下さい。 オンマウスで画像1から画像2へ0.6sで切り替わる箇所をやっていまして、 以下のHTMLとCSSだとクロームならできるのですが、IEとFirefoxだと うまく反映されてきません。 実際はこれに吹き出しを付けたりしているのですが、 そちらはキーフレームを使っったらIEもFirefoxもうまく表示できたのですが、 「画像1から画像2へ切り替える」というのが作れなくて困っています。 うまくtransitionを反映させるか、キーフレームもしくは別の方法で 画像を切り替えることができませんでしょうか? 今、やっているものを一部記載いたしました。 何卒よろしくお願い申し上げます。 【HTML】 <div id="people-list"> <ul class="p01"> <li><a href="#"></a> </ul> </div> 【CSS】 .p01 li a { background: url(../img/img-people01-off.png) no-repeat; } .p01 li a { background-size: 320px 270px; } .p01 li a { background: url(../img/img-people01-off.png) no-repeat; } .p01 li a { width: 320px; height: 270px; display: block; background-size: 320px 270px; text-indent: -9999px; transition: 0.6s; -webkit-transition: 0.6s; -moz-transition: 0.6s; -o-transition: 0.6s; } .p01 li a:hover { background-image: url(../img/img-people01-on.png); }

    • ベストアンサー
    • CSS
  • CSS3で困ってます!

    現在、HTML5でサイト書き出し中です。CSS3も使っているのですが、大きな問題が発生いたしまして… 背景のボックスの大きさがbodyの大きさに追随しないんです。ボックスからINFOMATION欄などが飛び出してしまってデザイン的によろしくない感じです。 ボックス要素は、divのidのtopに対して与えています。topはペ0次全部のコンテンツをまとめるためのものです。 今日一日、CSSのソースとにらめっこしたのですがわかりませんでした。皆さんなら、わかると思い頼らせて頂くことにいたしました。どこが間違っているかわかりません!教えてください(涙) CSSは、 @charset "utf-8"; /* CSS Document */ *{ font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; } a{ text-decoration:none; } div#top{ width: 920px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; box-shadow: 3px 3px 10px #666; -moz-box-shadow: 3px 3px 10px #666; -webkit-box-shadow: 3px 3px 10px #666; -o-box-shadow: 3px 3px 10px #666; text-align:left; margin:0 auto; } div#header{ text-align:center; } div#banner{ width: 900px; margin: 0px auto; } div#menu{ width: 900px; margin: 0px auto; } div#menu ul { float:left; margin:0; padding:0; height: 40px; text-align:center; } div#menu li { margin:0; padding:0; float:left; font-size:90%; text-align:center; list-style-type:none; width: 225px; -webkit-transition-property: background-color; -webkit-transition-duration: 0.25s; -moz-transition-property: background-color; -moz-transition-duration: 0.25s; -o-transition-property: background-color; -o-transition-duration: 0.25s; background-color: #3C0; height: 40px; } div#menu li span { font-family:verdana; font-size:140%; color:#fff; line-height: 40px; } div#menu li:hover{ background-color: #0F0; } div#contents{ width:900px; height: auto; margin:0 auto; padding: 10px 0; } div#info { float:left; width:450px; } div#info h2{ font-size: 25px; width: 450px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; -o-border-radius: 15px; background-color:#090; color: #FFF; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; padding-top: 2px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; margin-top: 0px; text-align:left; } div#info dl dt { clear:left; float:left; width:7em; padding:10px 0.5em; } div#info dl dd { margin-left:0; padding:10px 0.5em 10px 8em; background:#fff url(images/bg_info_line.gif) 0 100% repeat-x; } div#news{ float: right; width: 430px; text-align:left; } こんな感じです。 実際のページはここにあります。 http://skino.cyber-ninja.jp/test/

    • ベストアンサー
    • CSS
  • DIV要素のボックスを移動させるスクリプト教えて

    やりたい事は (1) L・Rという2つのラジオボタンを設置し、 ウィンドウ左に配置したDIV要素のボックスを、 Lをクリックでウィンドウ左、 Rをクリックでウィンドウ右に配置を変更させる。 (2) 画像ボタンを設置し、クリックされると DIV要素のボックスを、ウィンドウ枠外へスライドさせ、 再クリックで元の配置にスライドさせ戻したい。 初心者のためスクリプトをどのように記述すれば、 良いか解らず質問させていただきます。 ご教授よろしくお願いします。 http://www11.ocn.ne.jp/~website/sample3/index.html 一応参考アドレスを記載させていただきますが この記述方法だと、DIV要素のボックスが左側にあるとき、 画像ボタンクリックで、DIV要素のボックスを、 ウィンドウ枠外へスライドさせ、 再クリックで元の配置に戻すと、 その後、Rをクリックしても、DIV要素のボックスが ウインドウ右側へ移動しなくなってしまいます。 ===== HTML ==== <body> <div id="wrapper"> <header></header> <nav></nav> <div id="box" class="box_l"> <label> <input type="radio" id="radio1" name="test" checked="checked" /> L</label> <label> <input type="radio" id="radio2" name="test" /> R</label> </div> <div id="tab" class="tab_l"></div> <section id="section01" class="section"> <p>PAGE1</p> </section> </div> <div id="page_top"></div> <footer></footer> </body> ==== CSS ==== .box_l { position: fixed; top:30px; left:0px; z-index: 2000; width: 90px; height: 160px; padding: 20px 5px 5px 5px; background-color: rgba(0,0,0,0.25); } .box_r { position: fixed; top:30px; right:0px; z-index: 2000; width: 90px; height: 160px; padding: 20px 5px 5px 5px; background-color: rgba(0,0,0,0.25); } .tab_l { position: fixed; top:30px; left:100px; z-index: 2000; width: 30px; height: 185px; background-color: rgba(0,0,0,0.25); background-image: url(../images/tnm2.png); background-position: center center; background-repeat: no-repeat; cursor: pointer; border-radius: 0 10px 10px 0; /* CSS3草案 */ -webkit-border-radius: 0 10px 10px 0; /* Safari,Google Chrome用 */ -moz-border-radius: 0 10px 10px 0; /* Firefox用 */ } .tab_r { position: fixed; top:30px; right:100px; z-index: 2000; width: 30px; height: 185px; background-color: rgba(0,0,0,0.25); background-image: url(../images/tnm1.png); background-position: center center; background-repeat: no-repeat; cursor: pointer; border-radius: 10px 0 0 10px; /* CSS3草案 */ -webkit-border-radius: 10px 0 0 10px; /* Safari,Google Chrome用 */ -moz-border-radius: 10px 0 0 10px; /* Firefox用 */ } #section01 { min-height: 100%; min-width:320px; width: 100%; height: 1000px; } #section01 p { font-style: normal; font-weight: 400; color: #000; font-size: 48px; text-align: center; } ==== SCRIPT ==== $(window).on('load', function() { for (i = 1; i <= 2; i++) { document.getElementById('radio' + i).checked = i==1; } }); $(function() { $("[name='test']").click(function(){ var num = $("[name='test']").index(this); if(num == 1){ $("#box").removeClass("box_l").addClass("box_r"); $("#tab").removeClass("tab_l").addClass("tab_r"); } else { $("#box").removeClass("box_r").addClass("box_l"); $("#tab").removeClass("tab_r").addClass("tab_l"); } }) $(".tab_l,.tab_r").toggle(function(){ $(".box_l").animate({'left':'-100px'},300); $(".tab_l").css('background-image','url(images/tnm1.png)').animate({'height':'40px','left':'0px'},300); $(".box_r").animate({'right':'-100px'},300); $(".tab_r").css('background-image','url(images/tnm2.png)').animate({'height':'40px','right':'0px'},300); }, function(){ $(".box_l").animate({'left':'0px'},300); $(".tab_l").css('background-image','url(images/tnm2.png)').animate({'height':'185px','left':'100px'},300); $(".box_r").animate({'right':'0px'},300); $(".tab_r").css('background-image','url(images/tnm1.png)').animate({'height':'185px','right':'100px'},300); }) })

    • ベストアンサー
    • HTML
  • background-imageを徐々変化させたい

    現在、二枚の画像を徐々に変化させたいと思い ~HTML~ <TABLE> <TBODY> <tr> <td><a href="http://www.abcd5.com/news" class="news_botan"></a></td> </tr> <tr> <td><a href="http://www.efgh5.com/news" class="news_botan"></a></td> </tr> </TBODY> </TABLE> ~CSS~ .news_botan{ width:110px; height:10px; display:block; background:url(IMGTXT/news0.gif) no-repeat; transition: background-image 4.0s ease 5s; -webkit-transition: background-image 3.0s ease 3s; -moz-transition: background-image 3.0s ease 3s; -ms-transition: background-image 3.0s ease 3s; -o-transition: background-image 3.0s ease 3s; } .news_botan:hover{ background:url(IMGTXT/news3.gif); } としましたが変化しませんでした。 どうすれば徐々にnews0.gifからnews3.gifに変化する事が出来るのでしょか?

    • ベストアンサー
    • CSS
  • プログラム CSS3 アニメーション

    .text{ position: relative; display: inline-block; font-size: 2em; } .text:before{ position: absolute; top: 1.3em; left: 0; content: ""; display: inline-block; width: 0; height: 2px; background: #34BBF3; transition: 2s; } .text:hover:before{ width: 100%; } このプログラムはhttps://qiita.com/junya/items/4805404624292401030dからコピペしたCSS3のアニメーションを使ったアンダーラインのプログラムです。 このプログラムの四行目と九行目につかわれている「em」とはなんですか。

    • 締切済み
    • CSS
  • プログラム CSS3 アニメーション

    .text{ position: relative; display: inline-block; font-size: 2em; } .text:before{ position: absolute; top: 1.3em; left: 0; content: ""; display: inline-block; width: 0; height: 2px; background: #34BBF3; transition: 2s; } .text:hover:before{ width: 100%; } このプログラムはhttps://qiita.com/junya/items/4805404624292401030dからコピペしたCSS3のアニメーションを使ったアンダーラインのプログラムです。 このプログラムの十一行目の「content: "";」はどうして何も書かないんですか。 これをかいて何の意味があるんでしょう。

    • 締切済み
    • CSS

専門家に質問してみよう