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

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

ただいまの
回答率

89.63%

jQueryのoffsetとスクロールについての質問です。topからの位置についてです。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 101

reo_fukkase

score 22

class="form-jump"を押した時に、class="form"のところにスクロールで持っていきたいです。ですが、画像のような状態にかぶってしまいます。なので、topからの位置を変えたらもう少し上の方で止まってくれるかなと思ったのですが、そのようにするにはどのようにすれば良いでしょうか?
コードが多すぎて文字数制限がかかってしまいますので、途中省略します。
コンパイルはしてあります。
よろしくお願いします。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>iSara[イサラ] | バンコクのノマドエンジニア育成講座</title>
        <link rel="stylesheet" href="css/iSara.css">
        <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
    </head>
    <body>
        <header>
            <div class="header-left">
                <img src="image/isaralogo.png">
                <p>バンコクのノマドエンジニア育成講座</p>
            </div>    
            <div class="header-right">
                <a href="#contact-id" class="form-jump">お問い合わせ / 資料請求はこちら</a>
            </div>

            </div>
        </header>
        <div class="clear"></div>
        <div class="title">
            <div class="title-top">
                <div class="title-text">
                    <h2>プログラミングで<br>人生の安定を手にいれよう</h2>
                    <img src="image/isaralogolarge.png">
                    <h3>バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</h3>
                </div>
            </div>
        </div>
        <div class="recruitment">
            <div class="recruitment-text">
                <h3 class="recruitment-first">まずは20日間で、<br>月10万円稼げるスキルを手にいれよう。</h3>
                <h3 class="recruitment-second">※受講料金は実質0円です。詳しくは資料請求をどうぞ。</h3>
                <a href="#contact-id" class="form-jump">お問い合わせ<span class="text-span">&amp;</span>資料請求はこちら</a>
                <h3 class="recruitment-third">第6期生:2019年11月25日<span class="text-span">~</span>2019年12月14日*締め切りました</h3>
                <h3 class="recruitment-forth">第7期生:2020年2月17日<span class="text-span">~</span>2020年3月7日*締め切りました</h3>
                <h3 class="recruitment-fifth">第8期生:2020年4月〜5月ごろを予定*資料請求受付中です</h3>
            </div>
          
<div class="form"  id="contact-id">
            <div class="form-title">
                <i class="far fa-file"></i>
                <h2 class="form-main-title">資料請求フォーム</h2>
            </div>
            <div class="clear"></div>
            <p class="title-second">まずは無料で資料請求からどうぞ。</p>
            <div class="container">
                <input class="input-first" type="text" placeholder="姓">
                <input class="input-first" type="text" placeholder="名">
                <input class="input-first" type="mail" placeholder="メールアドレス">
                <textarea placeholder="質問などはこちら(空欄でもOKです)"></textarea>
                <input class="input-second" type="submit" value="送 信">
            </div>
        </div>

<script type="text/javascript" src="js/jQuery-3.4.1.min.js"></script>
        <div id="fb-root"></div>
        <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v6.0&appId=496232624321738&autoLogAppEvents=1"></script>
    </body>
</html>
header{
    height:75px;
    background-color:white;
    position: fixed;
    top:0;
    width:100%;
    z-index: 1000;
    .header-left{
        float:left;
        margin-left:1px;
        img{
        height:45px;
        width:128px;
        margin-top: 14px;
        margin-left:127px;

        }
        p{
            display: inline-block;
            font-size: 14px;
            letter-spacing: 1.5px;
            font-weight: 600;
            color:#333333;
            vertical-align: bottom;
            margin-left:0.5px;
            margin-bottom:9px;
        }
    }
    .header-right{
        float:right;
        a{
            display: inline-block;
            background-color:#da6b64;

            text-decoration: none;
            color:#fff;
            font-size: 14px;
            font-weight:300;
            letter-spacing:1.5px;
            border-radius: 25px;
            padding:11px 40.5px;
            margin-top: 16px;
            margin-right:127px;
            text-align: center;
            &:hover{
                background-color:#d84940;
            }
        }
    }
}
          
.recruitment{
    height:600px;
    background-color:#ebb94d;
    .recruitment-first{
        color:#fff;
        text-align: center;
        letter-spacing: 1.5px;
        line-height: 32px;
        padding-top:30px;
        font-size:20px;
        font-weight:300;
    }
    .recruitment-second{
        color:#c7254e;
        width:465px;
        height:25px;
        background-color:#f9f2f4;
        margin-left:auto;
        margin-right:auto;
        font-weight:800;
        font-size:18px;
        border-radius: 5px;
        text-align:center;
        margin-top:15px;
        font-family:Menlo, Monaco, Consolas, "Courier New", monospace;
        letter-spacing: 1.5px;
    }
    a{
        font-size:28px;
        letter-spacing: 1.5px;
        font-weight:500;
        text-decoration: none;
        width:1030px;
        height:105px;
        line-height: 105px;
        background-color: #da6b64;
        color:rgb(255, 255, 255);
        display: block;
        text-align: center;
        margin-top:47px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 60px;
        span{
            margin-left:2.5px;
            margin-right:2.5px;
        }
        &:hover{
            background-color:#d84940;
        }
    }
    .recruitment-third{
        color:rgb(255, 255, 255);
        font-size:20px;
        text-align: center;
        letter-spacing: 2.4px;
        margin-top:67px;
        font-weight: 600;
    }
    .text-span{
        margin-left:8px;
        margin-right:8px;
    }
    .recruitment-forth{
        color:rgb(255, 255, 255);
        font-size:20px;
        text-align: center;
        letter-spacing: 2.4px;
        margin-top:35px;
        font-weight: 600;
    }
    .recruitment-fifth{
        color:rgb(255, 255, 255);
        font-size:20px;
        text-align: center;
        letter-spacing: 2.4px;
        margin-top:35px;
        font-weight: 600;
    }
    .buttons{
        margin-top:25px;
        text-align: center;
        .twitter-share-button{
            display: inline-block;
            margin-left:7px;
        }
        .fb-like{
            vertical-align: bottom;
            margin-bottom:5.5px;
        }
    }
}
            
.form{
    height:708px;
    background-color: #ebb94d;
    overflow: hidden;
    .form-title{
        height: 28px;
        width:260px;
        margin:60px auto 0 auto;
        .fa-file{
            font-size: 24px;
            float:left;
            color:#333;
            line-height: 28px;
            margin-right: 2px;
        }
        .form-main-title{
            letter-spacing: 1.5px;
            float:left;
            font-weight: 500;
            font-size: 28px;
            line-height:28px;
            color:#333;
        }
    }
    .title-second{
        text-align: center;
        letter-spacing: 1.5px;
        color: #333;
        font-weight: 500;
        margin-top: 28px;
    }
    .container{
        .input-first{
            width:832px;
            height:57px;
            background-color: #fff;
            border-radius: 6px;
            border:none;
            margin:27px auto 0 auto;
            padding:0 11px 0 11px;
            display:block;
            font-size: 14px;
            font-weight: 200;
            color:#333;
        }
        textarea{
            width:832px;
            height:72px;
            background-color: #fff;
            border-radius: 6px;
            border:none;
            margin:48px auto 0 auto;
            padding:16px 11px 16px 11px;
            display:block;
            color:#333;
            font-size: 14px;
            font-weight: 200;
        }
        .input-second{
            display: block;
            width:856px;
            height:57px;
            color:#fff;
            background-color: #da6b64;
            margin:44px auto 0 auto;
            border-radius: 37px;
            border:none;
            font-size: 22px;
            text-align: center;
            cursor: pointer;
        }
    }
}
$('.form-jump').click(function() {
        var id=$(this).attr('href');
        var position=$(id).offset().top;
        $('html,body').animate({'scrollTop':position},500);/* Act on the event */
    });


現在の画像⬇️
![イメージ説明
理想⬇️
イメージ説明

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2020/02/15 14:13

    ・・・
    を入れられても実際のコードにないのでしたらこちらの手元で再現する際に邪魔にしかなりません。
    再現するコードのみをご提示ください

    キャンセル

  • reo_fukkase

    2020/02/15 14:14

    わかりました

    キャンセル

回答 2

checkベストアンサー

+1

js側でheader分の高さを取得してその分マイナスなど行えば適応されるとおもいます。

$('.form-jump').click(function() {
  var headerHight = 50; //ヘッダの高さ
  var contentSpace = 0; // header + で余白をあけたい場合
  var href= $(this).attr("href");
  var target = $(href == "#" || href == "" ? 'html' : href);
  var position = target.offset().top - headerHight - contentSpace; //ヘッダの高さ分位置をずらす
  $("html, body").animate({scrollTop:position}, 550, "swing");
  return false;
});


コードだとこのような感じになります。

参考コードの具体的な内容とcodepenも共有いたします。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/02/15 15:10

    ありがとうございます
    貼っていただいた参考リンクも見てみましたが、var target = $(href == "#" || href == "" ? 'html' : href);の意味がよくわからず、
    var headerheight=75;
    $('.form-jump').click(function() {
    var id=$(this).attr('href');
    var position=$(id).offset().top-headerheight;
    $('html,body').animate({'scrollTop':position},500);/* Act on the event */
    });
    でやったらできました。

    キャンセル

0

試していませんので動くかわかりませんが、こうですか?

var position=$(id).offset().top - $('header').height();

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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