scroll for page anchors on mobile and in respect to the height of different element than on large view
<p>I have the following code which produces nice scrolling effect to page anchors on viewports bigger than 768px (included). It places the target of anchor nicely below the height of <code>#navbarTop</code>. However, on small viewports it is a different element, <code>#menuMobile</code>, which height should be respected. The <code>#menu Mobile</code> is a list of links which unfolds when clicking on humburger menu button.</p>

<pre><code>$(document).ready(function() {

var headerHeight, part, place;

function getOffsets() {
    headerHeight = $('#navbarTop').height(); 
}

$(window).load(getOffsets).resize(getOffsets);

$(function () {
    $('.headerAnchor').click(function () {
        part = $(this).attr('href');
        place = $(part).offset().top - headerHeight;

        $('html, body').animate({
            scrollTop: place
        }, 'slow');

        return false;
    });
 });
});
</code></pre>

<p>And html for main menu:</p>

<pre><code>&lt;div class="navbar navbar-default navbar-fixed-top" id="navbarTop"&gt;
   &lt;div class="navbar-header"&gt;
       &lt;a href="#" class="navbar-brand" id="brand"&gt;Curriculum Vitae&lt;/a&gt;
       &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
            &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
            &lt;span class="icon-bar"&gt;&lt;/span&gt;
        &lt;/button&gt;
   &lt;/div&gt;
     &lt;ul id="menuMobile" class="nav navbar-nav navbar-right collapse navbar-collapse"&gt;
       &lt;li&gt;&lt;a class="headerAnchor" href="#data"&gt;Dane &lt;span&gt;kontaktowe&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a class="headerAnchor" href="#aspirations"&gt;Aspiracje &lt;span&gt;zawodowe&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a class="headerAnchor" href="#qualifications"&gt;Kwalifikacje&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a class="headerAnchor" href="#portfolio"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a class="headerAnchor" href="#experience"&gt;Historia &lt;span&gt;zatrudnienia&lt;span&gt;&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a class="headerAnchor" href="#education"&gt;Wykształcenie&lt;/a&gt;&lt;/li&gt;
       &lt;li&gt;&lt;a class="headerAnchor" href="#skills"&gt;Umiejętności&lt;/a&gt;&lt;/li&gt; 
     &lt;/ul&gt;
&lt;/div&gt;
</code></pre>

<p>I tried to adjust the JS code to be able to have good scrolling effect on mobile view - in respect to the height of <code>#menuMobile</code> which stays open all the time after the menu button is clicked. However, I cannot get the proper effect:</p>

<pre><code>$(document).ready(function() {

var headerHeight, part, place;

function getOffsets() {
    headerHeight = $('#navbarTop').height(); 
    menuMobileHeight = $('#menuMobile').height();
}

$(window).load(getOffsets).resize(getOffsets);

$(function () {
    $('.headerAnchor').click(function () {
        part = $(this).attr('href');
        place = $(part).offset().top - headerHeight;
        placeMobile = $(part).offset().top - menuMobileHeight;

        $('html, body').animate({
            scrollTop: place
        }, 'slow');

        if ($(window).width() &lt; 768) { 
            $('html, body').animate({
                scrollTop: placeMobile
            }, 'slow');
        }

        return false;
    });
 });
});
</code></pre>

<p>Can anyone tell what I am doing wrong?</p>