divへのスクロールアニメーション中に、nav/divの高さをオフセットすることができません

Question

ナビゲーションの高さを知ることができません。

試み＃1：

$("#process-link").click(function() { 
    $('html, body, #project-container').animate({ 
     scrollTop: $("#process-work").offset().top 
    }, 2000 + $("nav#primary").height()); 
}); 

試み＃2：

var headerHeight = $("nav#primary").height(); 

    $.address.change(function(evt) { 
    var target = "#" + evt["pathNames"][0]; //Get the target from the event data 

    // If there's been some content requested go to it…else go to the top 
    if(evt["pathNames"][0]) { 
     var scrollToPosition = $(target).offset().top - headerHeight; 
     $('html, body, #project-container').animate({ 'scrollTop': scrollToPosition }, 600); 
    } else { 
     $('html, body, #project-container').animate({ 'scrollTop': '0' }, 600); 
    } 

    return false; 
}); 

試行＃3

$(function() { 

     $('#process-link').click(function() { 
      $("html, body, #project-container").animate({ 
       scrollTop: $("#process-work").offset().top + $('nav#primary').height() 
      }, 2000); 

      return false; 
     }); 
    }); 

HTML

<nav id="primary">Content</nav>  
<div id="arrow-nav" class="container-full clearfix">Content</div> 

<div id="project"> 
     <div id="project-container"> 
      <div class="container"> 
       <section> 
        <p class="sm-title">Client:</p> 
        <h2 id="project-title"></h2> 
        <p id="project-description"></p> 
        <a id="process-link">View Process <i class="fa fa-long-arrow-right"></i></a> 

        <div class="row"> 
         <div id="process-work"> 
          <div class="col-6 fixme"> 
           <h2 id="process-title">Process Work</h2> 
           <p id="process-description"></p> 
          </div> 
          <div class="col-6"> 
           <div id="process-wireframes" class="owl-theme owl-carousel"></div> 
          </div> 
         </div><!-- end process-work--> 
        </div> 

       </section> 
      </div> 
     </div><!-- end project container --> 
    </div><!--closes project--> 

私は＃プロセス・リンクをクリックした後、それは＃プロセスワークにあなたをスライドし、NAVの＃プライマリおよびそれに応じて＃矢印-NAVとオフセットの高さを計算してそれを作るしようとしています。

Answer 1

このjavascriptは現在、私がやりたいことを達成しました。すべてのdiv要素を＃project-contentという1つの要素にグループ化し、その高さとnavを計算しました。ページが修正されたため、問題が発生していました。

HTML

<div id="project-content"> 
    <p class="sm-title">Client:</p> 
    <h2 id="project-title"></h2> 
    <p id="project-description"></p> 
    <div style="background:#919191" class="hr"></div> 
    <a id="project-link" target="_blank">View Website <i class="fa fa-long-arrow-right"></i></a> 
    <a id="process-link" data-type="slideTo" data-target="process-work">View Process <i class="fa fa-long-arrow-right"></i></a> 
    <div id="project-tag"></div> 
    <div id="project-images"></div> 
</div><!--end project content--> 

Javascriptを

$('#process-link').click(function() { 
     $("html, body, #project-container").animate({ 
      scrollTop: $('nav#primary').height() + $("#arrow-nav").height() + $("#project-content").height() + 30 
     }, 2000); 

     return false; 
    }); 

もドキュメントに存在してdivタグと私は計算していますを参照するにはOPを見てください。 #project-containerにはpadding-top:60px;があります。これはオフセットにも影響すると私は思っています。それが30を追加した理由です。