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

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

ただいまの
回答率

89.08%

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

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,483

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/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>

    キャンセル

  • 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>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><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>
    -------

    キャンセル

  • 2016/10/21 09:12

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

    キャンセル

checkベストアンサー

+2

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 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);

    });

    キャンセル

  • 2016/10/18 15:44 編集

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

    キャンセル

  • 2016/10/21 09:17

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

    キャンセル

+2

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


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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/10/18 13:10

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

    キャンセル

  • 2016/10/18 14:17

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

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

    キャンセル

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

  • ただいまの回答率 89.08%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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