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

Question

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

解決済

回答 3

投稿 2016/10/17 16:07 ・編集 2016/10/17 17:33

評価
クリップ 0
VIEW 2,783

nala

score 12

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

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

記述は下記の通りです。

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

#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;
}

<script type="text/javascript">
//初期は非表示
$("#page-top").hide();

$(function () {
    $(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>

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

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

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

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

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

クリップを取り消します
良い質問の評価を上げる

以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します

評価を下げられる数の上限に達しました

評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します

この機能は開放されていません

評価を下げる条件を満たしてません

評価を下げる理由を選択してください
プログラミングに関係のない質問やってほしいことだけを記載した丸投げの質問問題・課題が含まれていない質問意図的に内容が抹消された質問過去に投稿した質問と同じ内容の質問広告と受け取られるような投稿
詳細な説明はこちら

上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。
質問の評価を下げる機能の利用条件

この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
- メールアドレスの認証
  メールアドレスの認証
- 質問評価に関するヘルプページの閲覧
  質問評価に関するヘルプページの閲覧

回答 3 件

評価が高い順
新着順
古い順

+3

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

#page-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
}

投稿 2016/10/17 16:10

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2016/10/17 16:18 編集

コメントありがとうございます、
外部スタイルシートで、下記のcssを設定しております。

#page-top{
position: fixed;
bottom:10px;
right: 1%;
}

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

キャンセル
2016/10/17 16:43

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

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

キャンセル
2016/10/17 16: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;
}

他の方の回答にも既に記載してしまいましたが、トップに戻るボタンに関連のある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; }

キャンセル
2016/10/17 17:53

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

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

キャンセル
2016/10/18 13:14

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

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

キャンセル
2016/10/18 13: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>
 
<a href="#wrap" class="arrow sample5-5"></a>

</body>
</html>
-------

質問のところに載ってるソースだけで試してもダメですか？？ちょっと雑ですけど、これ↓ ------- <!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> <a href="#wrap" class="arrow sample5-5"></a> </body> </html> -------

キャンセル
2016/10/21 09:12

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

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

キャンセル

+2

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

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

投稿 2016/10/17 16:18

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2016/10/17 16: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;
}

コメントありがとうございます。試しに、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; }

キャンセル
2016/10/17 16:58

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

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

キャンセル
2016/10/17 17:09

とりあえず、掲載されていたHTML・CSS・JSをコピーして手元で試してみましたが、普通にフェードイン・アウトされてましたよ？
ただ、現在のJSでは「$("#page-top").hide();」が$(function(){});の外側に出てしまっているので、初期状態ではボタンは表示されたままです。
なのでまず$("#page-top").hide();の位置を変更してください。

それから、スクロール量が1000pxと比較的大きいので、HTML側に高さがそもそも1000px無い場合、何も表示されません。
なので、ボタンを表示するためのスクロール量をもう少し少なめに設定して確認してみてください。

それでもダメな場合、何か記載していないところで問題が生じている可能性があります。

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

キャンセル
2016/10/18 13:10

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

一応、コンテンツの高さは約1650pxでしたが、ボタンは表示されていません。
でも、確かにスクロール量1000pxは大きいですね、500pxにしてみます！

やはり、他のところに問題があるのでしょうか。。。

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

キャンセル
2016/10/18 14: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が構築される前に何か処理をしようとしても、存在しないものに対して処理することはできないので、無効になります。

<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が構築される前に何か処理をしようとしても、存在しないものに対して処理することはできないので、無効になります。

キャンセル
2016/10/18 14:17

それから、Chromeの開発者ツールなどで検証してもらって、
ソース上の<a href="#wrap" class="arrow sample5-5"></a>をクリックした時に画面上のどこが反応しているか確認してみるといいと思います。
そもそも画面上に表示されているけど、何らかの原因（背面に隠れているとか、全然関係なところに表示されているとか）で見えていないだけなのか、
それとも存在すらしていないのか、判別することができます。

あと、if文でfadeIn(), fadeOut()を分岐しているスクリプトコードのところに、
console.log()でコメントを出力して、そもそもスクリプト自体が動いているのかどうかも
念のため確認した方がいいかもしれません。

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

キャンセル

同じタグがついた質問を見る

HTML
jQuery

score 2 · Accepted Answer · 2016-10-17T16:37

ベストアンサー

+2

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

投稿 2016/10/17 16:37

回答の評価を上げる

以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
回答の評価を下げる

下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

2016/10/18 12:31

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

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

キャンセル
2016/10/18 12:33

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

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

キャンセル
2016/10/18 15: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);

});

質問のところで、エラーがないと言っておりましたが、よく調べてみたら、別で取り込んでいる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); });

キャンセル
2016/10/18 15:44 編集

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

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

キャンセル
2016/10/21 09:17

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

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

キャンセル

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

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

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

関連した質問

同じタグがついた質問を見る

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

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

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

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

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン