質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

3530閲覧

トップへ戻るボタンを表示させたい

nala

総合スコア12

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/10/17 07:07

編集2016/10/17 08:33

スマートフォン用のページで、
スクロールしたらトップへ戻るボタンをフェードインで表示させたいのですが、
何度試しても表示されずうまくいきません。

Chromeの開発者ツールでもエラーが出ず、原因がまったくさっぱりです。。。

記述は下記の通りです。

html

1<p id="page-top"><a href="#wrap" class="arrow sample5-5"></a></p>

css

1#page-top { 2 position: fixed; 3 bottom: 30px; 4 right: 30px; 5} 6 7.arrow{ 8position: relative; 9display: inline-block; 10padding: 0 5% 25% 10%; 11color: #fff; 12vertical-align: middle; 13text-decoration: none; 14} 15.arrow::before, 16.arrow::after{ 17position: absolute; 18top: 0; 19bottom: 50px; 20left: -56px; 21margin: auto; 22content: ""; 23vertical-align: middle; 24} 25 26.sample5-5::before{ 27width: 50px; 28height: 50px; 29background: #333; 30opacity: 0.7; 31-webkit-border-radius: 25%; 32border-radius: 25%; 33position: absolute; 34right: 5%; 35} 36.sample5-5::after{ 37top: 8%; 38width: 15px; 39height: 15px; 40border-top: 4px solid #fff; 41border-right: 4px solid #fff; 42-webkit-transform: rotate(-45deg); 43transform: rotate(-45deg); 44position: absolute; 45right: 0; 46} 47

javascript

1<script type="text/javascript"> 2//初期は非表示 3$("#page-top").hide(); 4 5$(function () { 6 $(window).scroll(function () { 7 //1000pxスクロールしたら 8 if ($(this).scrollTop() > 1000) { 9 //フェードインで表示 10 $('#page-top').fadeIn(); 11 } else { 12 $('#page-top').fadeOut(); 13 } 14 }); 15 //ここからクリックイベント 16 $('#page-top a').click(function () { 17 $('body,html').animate({ 18 scrollTop: 0 19 }, 500); 20 return false; 21 }); 22}); 23</script>

ちなみにヘッダーを<div id="wrap"></div>で囲っております。

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

こんな感じのCSSは指定されています?

css

1#page-top { 2 position: fixed; 3 bottom: 30px; 4 right: 30px; 5}

投稿2016/10/17 07:10

gin

総合スコア2722

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nala

2016/10/17 07:18 編集

コメントありがとうございます、 外部スタイルシートで、下記のcssを設定しております。 #page-top{ position: fixed; bottom:10px; right: 1%; }
gin

2016/10/17 07:43

でしたら他のCSSの問題かと思うので、該当箇所のCSSを提示してください。
nala

2016/10/17 07:53

他の方の回答にも既に記載してしまいましたが、 トップに戻るボタンに関連のあるcssは下記になります。 よろしくお願いいたします。 /* --------ページトップcss-------- */ .arrow{ position: relative; display: inline-block; padding: 0 5% 25% 10%; color: #fff; vertical-align: middle; text-decoration: none; } .arrow::before, .arrow::after{ position: absolute; top: 0; bottom: 50px; left: -56px; margin: auto; content: ""; vertical-align: middle; } .sample5-5::before{ width: 50px; height: 50px; background: #333; opacity: 0.7; -webkit-border-radius: 25%; border-radius: 25%; position: absolute; right: 5%; } .sample5-5::after{ top: 8%; width: 15px; height: 15px; border-top: 4px solid #fff; border-right: 4px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; right: 0; } div#original_b .item_cap { color: #BF0000; }
gin

2016/10/17 08:53

↑うちでもちゃんと出てきましたよ? 一応ですけど、jQueryのライブラリは読み込んでますよね?? こんなの↓ <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
nala

2016/10/18 04:14

返信が遅くなりごめんなさい! ginさんの方でも試していただきありがとうございます、本当ですか…! jQueryライブラリは下記の形でhead内に読み込んでいます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
gin

2016/10/18 04:43

質問のところに載ってるソースだけで試してもダメですか?? ちょっと雑ですけど、これ↓ ------- <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> #page-top { position: fixed; bottom: 30px; right: 30px; } .arrow{ position: relative; display: inline-block; padding: 0 5% 25% 10%; color: #fff; vertical-align: middle; text-decoration: none; } .arrow::before, .arrow::after{ position: absolute; top: 0; bottom: 50px; left: -56px; margin: auto; content: ""; vertical-align: middle; } .sample5-5::before{ width: 50px; height: 50px; background: #333; opacity: 0.7; -webkit-border-radius: 25%; border-radius: 25%; position: absolute; right: 5%; } .sample5-5::after{ top: 8%; width: 15px; height: 15px; border-top: 4px solid #fff; border-right: 4px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; right: 0; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script> $(function () { $("#page-top").hide(); $(window).scroll(function () { //1000pxスクロールしたら if ($(this).scrollTop() > 1000) { //フェードインで表示 $('#page-top').fadeIn(); } else { $('#page-top').fadeOut(); } }); //ここからクリックイベント $('#page-top a').click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> </head> <body> <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><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><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><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><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><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><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><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><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><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> <p id="page-top"><a href="#wrap" class="arrow sample5-5"></a></p> </body> </html> -------
nala

2016/10/21 00:12

ありがとうございます、上記のソースのみ試してみましたら、ちゃんとボタンが出てきました! また、自分が質問の際に挙げたソースのみでもちゃんとできました…!(試してから質問すればよかったですね…ごめんなさい!) 挙げて頂いたソースにもろもろcssやjsとコンテンツをぶち込んだ際に、jsファイルを読み込んだところエラーがでてしまい、 最初からボタンが表示されている&スムーズスクロールが効かない状態になってしまいました。 ここに挙げていなかった外部のJSに問題があったようです、、すみません!
guest

0

ベストアンサー

  1. a要素の中身が何もないのでそもそも何もfadeinしませんよ。試しに文字でも画像でもいいので入れてみて下さい。
  2. 中身が無いように作るのであれば、スタイルにbackgroundを定義し、widthとheightを入れて下さい。

投稿2016/10/17 07:37

takepieee

総合スコア686

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nala

2016/10/18 03:31

コメントありがとうございます。返信が遅くなりごめんなさい! aタグの中に文字、画像それぞれで試しましたが表示されませんでした… cssでボタンを作成しており、そのスタイルシートを読み込んでいるのですが表示されない状況です。 なお、一旦JSを削除してHTML+cssの状態でしたら問題なくボタンが表示されてました。
takepieee

2016/10/18 03:33

HTML+cssの状態でしたら問題なくボタンが表示されていたということであれば、ブラウザのコンソールでJSエラーが出ていませんか?
nala

2016/10/18 06:36

質問のところで、エラーがないと言っておりましたが、よく調べてみたら、別で取り込んでいるjsにエラーが出ていることが分かりました。 こちらのjsを削除したところ、きちんとフェードイン・フェードアウトでボタンを表示できてました…! --------------------- スクロールして一定の場所を過ぎると上部固定するメニューのJSですが、 こちらにエラーが出ていました。 トップに戻るボタンとは直接関係があるかは分からないのですが。。。 ★印で示した行が、エラーの該当箇所です。 【エラー】 Uncaught TypeError: Cannot read property 'top' of undefined 【該当のJS】 jQuery(function() { var nav = jQuery('#main_nav'); // メニューのtop座標を取得する ★var offsetTop = nav.offset().top; var floatMenu = function() { // スクロール位置がメニューのtop座標を超えたら固定にする if (jQuery(window).scrollTop() > offsetTop) { nav.addClass('nav_fixed'); } else { nav.removeClass('nav_fixed'); } } jQuery(window).scroll(floatMenu); jQuery('body').bind('touchmove', floatMenu); });
takepieee

2016/10/18 06:53 編集

このエラーはtopを掴めない、言い換えれば「要素がない」のではないでしょうか。 id=main_navが存在しない、または同じidが2個以上あるページでこのJSを走らせるとエラーになる気がします。 間違ってたらごめんなさい。
nala

2016/10/21 00:17

あ、まさにそうだと思います! 他のページと共通のjsを読み込んでいるのですが、 このページでは構成上、そもそも固定メニューを使っていないのでエラーが出てしまうのですね。 このjsを読み込んだまま、中身が空の<nav id="main_nav"></nav>を追記してみましたらエラーもなくなり、問題なくボタンも表示されました! ありがとうございます。
guest

0

HTML

1<p id="page-top"><a href="#wrap" class="arrow sample5-5"></a></p>

このHTMLだとaタグの中身が空なんですが、
class="arrow"のcssはちゃんと効いてます?
アイコンを出すところで失敗してて、空っぽの要素を表示/非表示してるのかもしれませんよ?

投稿2016/10/17 07:18

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nala

2016/10/17 07:43

コメントありがとうございます。 試しに、aタグの中に「PAGE TOP」と入れてみたのですが文字も表示されず。。。 (そういう意味じゃなかったらすみません!) 共通css内に記述している他のcssは問題なく効いているみたいなのですが、、、 ちなみにトップに戻るボタンのcssは下記になります。 /* --------ページトップcss-------- */ .arrow{ position: relative; display: inline-block; padding: 0 5% 25% 10%; color: #fff; vertical-align: middle; text-decoration: none; } .arrow::before, .arrow::after{ position: absolute; top: 0; bottom: 50px; left: -56px; margin: auto; content: ""; vertical-align: middle; } .sample5-5::before{ width: 50px; height: 50px; background: #333; opacity: 0.7; -webkit-border-radius: 25%; border-radius: 25%; position: absolute; right: 5%; } .sample5-5::after{ top: 8%; width: 15px; height: 15px; border-top: 4px solid #fff; border-right: 4px solid #fff; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); position: absolute; right: 0; }
aKusano

2016/10/17 07:58

とりあえず、#page-topに関するJSを一旦切って、ノーマルなHTML+CSSの状態で正しくトップへ戻るボタンが表示されるかどうかを確認してください。 JSを切ってもボタンが表示されないなら、CSS側に問題があるはずです。
aKusano

2016/10/17 08:09

とりあえず、掲載されていたHTML・CSS・JSをコピーして手元で試してみましたが、普通にフェードイン・アウトされてましたよ? ただ、現在のJSでは「$("#page-top").hide();」が$(function(){});の外側に出てしまっているので、初期状態ではボタンは表示されたままです。 なのでまず$("#page-top").hide();の位置を変更してください。 それから、スクロール量が1000pxと比較的大きいので、HTML側に高さがそもそも1000px無い場合、何も表示されません。 なので、ボタンを表示するためのスクロール量をもう少し少なめに設定して確認してみてください。 それでもダメな場合、何か記載していないところで問題が生じている可能性があります。
nala

2016/10/18 04:10

返信が遅くなりすみません! 一旦JSを削除し、HTML+CSSのじょうたいでしたら問題なくボタンが表示されました。 aKusanoさんの方でも試していただきありがとうございます、ちゃんと効いているみたいですね。。。 ≫ただ、現在のJSでは「$("#page-top").hide();」が$(function(){});の外側に出てしまっているので、初期状態ではボタンは表示されたままです。 なのでまず$("#page-top").hide();の位置を変更してください。 、とありますが、当方全くの初心者のため書き方が分からず… どう修正すればいいか、教えて頂けると助かります…!>< 一応、コンテンツの高さは約1650pxでしたが、ボタンは表示されていません。 でも、確かにスクロール量1000pxは大きいですね、500pxにしてみます! やはり、他のところに問題があるのでしょうか。。。
aKusano

2016/10/18 05:12

<script type="text/javascript"> $(function () {  //初期は非表示 $("#page-top").hide(); ★ここに入れる $(window).scroll(function () { //1000pxスクロールしたら if ($(this).scrollTop() > 1000) { //フェードインで表示 $('#page-top').fadeIn(); } else { $('#page-top').fadeOut(); } }); //ここからクリックイベント $('#page-top a').click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> こういうことです。$(function(){....})というのは、サーバにアクセスがあってHTMLの読み込みが始まって、(画像とかその他のファイルの読み込みはまだ終わってないけど)DOMの構築が終わったタイミングでプログラムの処理を開始してください、という意味です。 ブラウザ内部に処理可能なDOMが構築される前に何か処理をしようとしても、存在しないものに対して処理することはできないので、無効になります。
aKusano

2016/10/18 05:17

それから、Chromeの開発者ツールなどで検証してもらって、 ソース上の<p id="page-top"><a href="#wrap" class="arrow sample5-5"></a></p>をクリックした時に画面上のどこが反応しているか確認してみるといいと思います。 そもそも画面上に表示されているけど、何らかの原因(背面に隠れているとか、全然関係なところに表示されているとか)で見えていないだけなのか、 それとも存在すらしていないのか、判別することができます。 あと、if文でfadeIn(), fadeOut()を分岐しているスクリプトコードのところに、 console.log()でコメントを出力して、そもそもスクリプト自体が動いているのかどうかも 念のため確認した方がいいかもしれません。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問