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

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

ただいまの
回答率

87.37%

headerにfixedを設定している状況で、スムーススクロールのずれを改善したい(aos.css、aos.jsのアニメーションを維持しながら)

受付中

回答 1

投稿 編集

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

改善したい内容は「headerにfixedを設定している状況で、スムーススクロールのずれを改善したい」です。
分からない箇所があるのは以下のURLのサイトです。
https://sakasete.conohawing.com/yourcoding/index.html
headerにfixedを設定しているため、スムーススクロールをしようとすると、headerの高さ(94px)も一緒に含まれてスクロールがずれてしまう状況で困っています。

どのようにスムーズスクロールをしたいかというと、headerのメニューにある「特徴」「価格」「お問い合わせ」右端の「お問い合わせボタン」headerの下にある「お問い合わせボタン」の5つのいずれかをクリックすると、サイトのなかにある該当箇所にスクロールさせたいです。以下のようにスクロールさせたいです。
以下のようにスクロールしたいです。

「特徴」→「ユアコーディング3つの特徴」
「価格」→「価格」
「お問い合わせ」→「お問い合わせ」

一応、Jqueryで以下のように高さがズレないように制御を試みていますが、どうしてもずれてしまいます。
var windowWidth = $(window).width();
var headerHeight = 94;
$("a[href^='#']").click(function(){
var speed = 500;
var href = $(this).attr("href");
var target = $(href=="#" || href==""?"html":href);
var position = target.offset().top - headerHeight;
$("body,html").animate({scrollTop:position}, speed, "swing");
return false;
});

調べてみた結果、head内に「<link rel="stylesheet" href="css/aos.css">」を入れているのが原因と分かりました。このコードを外すと、正常にスクロールできるのですが、aos.css、aos.jsのアニメーションを維持しながら、正常なスクロールを実装したいと考えているところです。よろしくお願い致します。

<header class="header">
    <div class="header-content">
       <div class="header-logo">
          <img src="img/logo.png">
       </div>
          <a class="header-title" href="index.html">
            <h1>ユアコーディング</h1>
          </a>
          <nav class="header-menu">
             <li><a href="#features-link">特徴</a></li>
             <li><a href="#price-link">価格</a></li>
             <li><a href="#contact-link">お問い合わせ</a></li>
          </nav>
             <div class="header-contact">
                <a href="#contact-link" class="header-contact-color">お問い合わせ</a>
             </div>


             <nav>
               <ul class="menu">
                  <li class="menu-list"><a href="#features-link">特徴</a></li>
                  <li class="menu-list"><a href="#price-link">価格</a></li>
                  <li class="menu-list"><a href="#contact-link">お問い合わせ</a></li>
               </ul>
            </nav>
            <button type="button" class="btn js-btn">
               <span class="btn-line"></span>
            </button>





    </div>
   </header>  
   <section class="main" data-aos="fade-down">
      <div class="main-maru-img">
         <img src="img/maru.png">
      </div>
     <div class="main-visual">
        <div class="main-visual-text-box">
           <div class="main-visual-text-1">
            コーディングの手間を<br> 最小に、デザインに注力<br>する助けに
           </div>
             <div class="main-visual-text-2">
               ユアコーディングはコーディングに<br>特化したフリーランス<br>デザインに注力されたい方の<br>助けになります
             </div>
             <div class="main-visual-text-contact">
             <a href="#contact-link" class="main-visual-text-contact-background">お問い合わせ</a>
             </div>
        </div>
        <div class="main-visual-img-box">
           <div class="main-visual-img">
              <img src="img/manager.png">
           </div>        
     </div>
     </div>
   </section>

   <section class="features" data-aos="fade-up" id="features-link">
      <h2 class="features-head">ユアコーディング3つの特徴</h2>
      <h4 class="features-Eng">FEATURES</h4>
           <h3 class="features-kousoku-code">高速コーディング</h3>
              <section class="features-item">
                 <div class="features-kousoku-code-img"><img src="img/cto.png"></div>
                 <div class="features-kousoku-code-text-box">
                    <div class="features-kousoku-code-text-head">コーディングに特化した<br class="br-kousoku">フリーランスのため、<br>スピード感を持った開発が可能。</div>
                    <div class="features-kousoku-code-text">開発は常にスピードとの勝負です。<br>ユアコーディングはコーディングに<br class="br-kousoku">特化しているため、<br>素早く納品することで、クライアントが<br class="br-kousoku">デザインに注力<br class="br-kousoku-2">する助けとなります。</div>
                 </div>
              </section>
                    <h3 class="features-kouhinshitu">高品質</h3>
                       <section class="features-item-2">
                        <div class="features-kouhinshitu-text-box">
                           <div class="features-kouhinshitu-text-head">正しいマークアップで、<br>内部SEOに強いコーディングを<br>デフォルトで行います。</div>
                           <div class="features-kouhinshitu-text">ユアコーディングでは、<br class="br-kousoku">「予測しやすい」「再利用しやすい」<br>「保守しやすい」「拡張しやすい」と言った設計をもとに<br>きちんとコーディングを行うため、<br class="br-kousoku">納品後も安心です。</div>
                        </div>
                          <div class="features-kouhinshitu-img"><img src="img/building_website.png"></div>
                       </section>
                       <h3 class="features-zinsoku">迅速なレスポンス</h3>
                       <section class="features-item3">
                        <div class="features-zinsoku-img"><img src="img/new_message.png"></div>
                        <div class="features-zinsoku-text-box">
                           <div class="features-zinsoku-text-head">原則いただいたメッセージは、<br>業務時間内であれば6時間以内に<br>お返しいたします。</div>
                           <div class="features-zinsoku-text">連絡を返さないフリーランスが多い中、<br>ユアコーディングでは定期的な進捗報告など、<br>社会人としての基本を踏まえて仕事を行なって<br>おります。</div>
                        </div>
                     </section>
   </section>
   <section class="price" data-aos="fade-up" id="price-link">
      <h2 class="price-head">価格</h2>
      <h4 class="price-ing">PRICE</4>
          <div class="price-table">
            <table border="1">
               <tr>
                 <td>HTMLコーディングトップページ</td><td>30.000円〜</td>
               </tr>
               <tr>
                 <td>HTMLコーディング下層1ページ</td><td>10.000円〜</td>
               </tr>
               <tr>
                  <td>HTML+WordPressトップページ</td><td>55.000円〜</td>
                </tr>
                <tr>
                  <td>HTML+WordPress下層1ページ</td><td>15.000円〜</td>
                </tr>
             </table>
          </div>
          <div class="price-syousai">*詳細な価格はページや仕様によって異なります</div>
          <section class="contact" data-aos="fade-up" id="contact-link">
   <h2 class="contact-head">お問い合わせ</h2>
   <h4 class="contact-ing">CONTACT</h4>
   <h4 class="contact-text">コーディングの人出が足りないとき、<br>あなたの力になります</h4>

     <div class="contact-form">
        <form action="#" method="post" id="form">
           <ul class="contact-box">
            <li>
            <lavel for="form-label">お名前</lavel>
            <div><input type="text" name="name" class="contact-nyuuryoku" placeholder="お名前"></div>
            </li>
            <li>
               <lavel for="form-label">メールアドレス</lavel>
               <div><input type="text" name="male" class="contact-nyuuryoku" placeholder="メールアドレス"></div>
            </li>
            <li>
               <lavel class="form-label">お問い合わせ内容</lavel>
               <div><textarea type="text" name="contact" class="contact-nyuuryoku-naiyou" placeholder="お問い合わせ内容"></textarea></div>
            </li>
            <li class="privacy-policy">
               <input type="checkbox" class="checkbox" id="confirmation" required>
                <label for="confirmation" class="privacy-text">
                   プライバシーに同意する
                </label>
            </li>
           </ul>
            <div class="sousin-btn"><input type="submit" value="送信" id="js-submit" disabled></div>
        </form>
     </div>

</section>
var windowWidth = $(window).width();
  var headerHeight = 94;
  $("a[href^='#']").click(function(){
    var speed = 500;
    var href = $(this).attr("href");
    var target = $(href=="#" || href==""?"html":href);
    var position = target.offset().top - headerHeight;
    $("body,html").animate({scrollTop:position}, speed, "swing");
    return false;
  });
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

0

target.offset().toptarget[0].offsetTopとするとどうでしょうか。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • トップ
  • HTMLに関する質問
  • headerにfixedを設定している状況で、スムーススクロールのずれを改善したい(aos.css、aos.jsのアニメーションを維持しながら)