title: Scrolling parent div overflow based on position of div within parent
body: <p>I have 3 sections of the page:</p>
  
  <pre><code>&lt;div class="container" id="main-container"&gt;
      &lt;div class="section" id="profile"&gt;
        Hello World
      &lt;/div&gt;
      &lt;div class="section" id="projects"&gt;
        Hello World 2
      &lt;/div&gt;
      &lt;div class="section" id="contact"&gt;
        Hello World 3
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I have 3 links in my navigation:</p>
  
  <pre><code>&lt;body onresize="scroll()"&gt;
    &lt;div class="nav"&gt;
      &lt;div class="nav-link" id="profile"&gt;
        &lt;a&gt;
          Profile
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="nav-link" id="projects"&gt;
        &lt;a&gt;
          Projects
        &lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="nav-link" id="contact"&gt;
        &lt;a&gt;
          Contact
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><code>#main-container</code> has overflow scroll and each of the sections takes up 100% width and height of the page. </p>
  
  <p>I tried to make it so that when one of them links are clicked, it animates the scrolling effect to that section:</p>
  
  <pre><code>$(document).ready(function () {
    $('.nav-link').on('click', function () {
      if ($(window).width() &lt; 768) {
        let section = $(".section#"+$(this).attr('id')).position();
        $('#main-container').animate({
            scrollTop: section.top
        }, 500);
      }
    });
  });
  </code></pre>
  
  <p>But this doesn't work, the value of <code>position()</code> changes based on where the user is scrolled to. How do i get the scroll position of a section of <code>$main-container</code> based on the <code>#main-container</code>? And how to do animate the scroll to it?</p>