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

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

ただいまの
回答率

87.37%

TOP追従ボタン改修したい

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,048

題名の通り、スクロールすると表示されるTOPボタンを下記の条件に沿って改修したいと考えております。
(jqueryに関して勉強中で恐縮です。)

【①改修したい内容】
・footerエリア頭部とTOP追従ボタン画像半分分が重なったらボタンはその位置から下にはスクロールしないようにさせたい。
・jqyeryでの動作を簡潔化したい。(例:ボタンの表示・非表示をクラス付与で行うなどCSSと連携できるところは連携する)

【②絶対条件(実装済み)】
・FVコンテンツが画面外になった時にTOP追従ボタンが表示される(高さ指定ではない)

ソースコード記載の上、解説をいただけますと幸いでございます。

html

<!DOCTYPE html>
<html class="no-js" lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<title>test</title>
<meta name="description" content="test">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header id="header">
</header>
<section id="wrapper">
<div id="fv"></div><!--ここをスクロールしたら追従ボタン表示-->
<section id="sec_01"></section>
<section id="sec02"></section>
</section>
<p id="pageTop" class="js-mouseOver01"><a href="#header"><img src="img/pagetop.png" alt="このページのTOPへ"></a></p>
<footer id="footer"></footer><!--半分重なったらボタン位置固定-->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/base.js"></script>
</body>
</html>

css

/* ↓リセットCSS↓ */
@charset "UTF-8";
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
form { display: block; }
html { font-size: 23.4375px; font-size: 3.125vw; }
body { color: #000; line-height: 1; overflow-y: scroll; }
input[type=email], input[type=number], input[type=tel], input[type=text], select, textarea { width: 100%; height: 40px; padding-left: 10px; padding-right: 10px; border: 1px solid #a1a1a1; box-sizing: border-box; font-size: 16px; -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; }
input[type=email]:focus, input[type=number]:focus, input[type=tel]:focus, input[type=text]:focus, select:focus, textarea:focus { border: 2px solid #f04646; outline: 0; }
input[type=radio], select { margin: 0; padding: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }
img { display: block; width: 100%; height: auto; }
a:link, a:visited { color: #000; text-decoration: none; }
a:hover { text-decoration: none; }
a:active { text-decoration: none; }
/* ↑リセットCSS↑ */

#wrapper { overflow: hidden; width: 100%; max-width: 750px; min-width: 320px; margin-left: auto; margin-right: auto; }

/* TOP追従ボタン */
#pageTop { display: none; position: fixed; bottom: 20px; right: 30px; width: 95px; }

jquery

(function($){
    "use strict";
    var $pageTop = $("#pageTop");
    $(window).on("load", function(){
        var observer = new IntersectionObserver(function(entries) { 
            for(var i=0; i < entries.length; i++){
                if(entries[i].isIntersecting){
                    $pageTop.css("transform","translateZ(0)").fadeOut(300,function(){$pageTop.css("transform","");});
                }else {
                    $pageTop.css("transform","translateZ(0)").fadeIn(300,function(){$pageTop.css("transform","");});
                }
            }
        });
        observer.observe(document.querySelector('#fv'));
    });
    $('a[href^="#"]').click(function(){
        var href= $(this).attr("href");
        var target = $(href === "#" || href === "" ? 'html' : href);
        var position = target.offset().top;
        $("html, body").animate({scrollTop:position}, 500, "swing");
        return false; 
    });

})(jQuery);
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

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

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

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

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

    評価を下げる理由を選択してください

    詳細な説明はこちら

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

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2020/02/10 17:03

    すでに position: fixed; となっているようですが、「ボタン位置固定」というのはどのような状態を指していますか?

    キャンセル

  • astaraea_lagoon

    2020/02/10 22:24

    コメントいただきありがとうございます。
    質問事項の文脈を変更致しました。

    キャンセル

回答 1

+1

footerエリアとTOP追従ボタンが半分重なったらボタン位置固定に切り替えたい。

stickyを使った方がいいかもしれませんが、footer の高さが成り行きだと「きっちり半分」とはいかないでしょう。
position: sticky;の仕組みや実際の使い方をやさしく解説 | コリス

jqyeryでの動作を簡潔化したい。

addClass()でコントロールして、アニメーションはtransitionを使うといいかもしれません。
CSS transition : jQuery の addClass と removeClass で変化を付ければいい。いや、これが一番よさそうだ。 : GINPRO / SQLの窓と銀プログラマ

コメントを受けて追記

footerコンテンツ頭0px+ボタン画像半径分pxのような計算方法で実装できればと考えております。
sticky実装に関しては事情により避けております・・・。 

それはそれは……心中お察しいたします。大変ですね。

であれば、IntersectionObserverfooterのイベントも拾い、.page-topのCSSをposition: absolute; bottom: 000px;などとすればいいかと思います。
rootMarginをつけてやれば、それなりに見えるのではないでしょうか?
Intersection observer のオプション | Intersection Observer API - Web API | MDN

また、footerheightなどが成り行きなら、JavaScriptの方で高さを取得するしかないでしょう。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/02/10 22:30

    コメントいただき、ありがとうございます。
    質問事項の文脈を下記の通り変更致しました。

    ・footerエリアとTOP追従ボタンが半分重なったらボタン位置固定に切り替えたい。

    ・footerエリア頭部とTOP追従ボタン画像半分分が重なったらボタンはその位置から下にはスクロールしないようにさせたい。

    footerコンテンツ頭0px+ボタン画像半径分pxのような計算方法で実装できればと考えております。
    sticky実装に関しては事情により避けております・・・。

    キャンセル

  • 2020/02/12 12:55

    追記しました。

    キャンセル

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

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

関連した質問

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