I have 3 sections of the page:

```
<div class="container" id="main-container">
    <div class="section" id="profile">
      Hello World
    </div>
    <div class="section" id="projects">
      Hello World 2
    </div>
    <div class="section" id="contact">
      Hello World 3
    </div>
  </div>

```

I have 3 links in my navigation:

```
<body onresize="scroll()">
  <div class="nav">
    <div class="nav-link" id="profile">
      <a>
        Profile
      </a>
    </div>
    <div class="nav-link" id="projects">
      <a>
        Projects
      </a>
    </div>
    <div class="nav-link" id="contact">
      <a>
        Contact
      </a>
    </div>
  </div>

```

`#main-container` has overflow scroll and each of the sections takes up 100% width and height of the page. 

I tried to make it so that when one of them links are clicked, it animates the scrolling effect to that section:

```
$(document).ready(function () {
  $('.nav-link').on('click', function () {
    if ($(window).width() < 768) {
      let section = $(".section#"+$(this).attr('id')).position();
      $('#main-container').animate({
          scrollTop: section.top
      }, 500);
    }
  });
});

```

But this doesn't work, the value of `position()` changes based on where the user is scrolled to. How do i get the scroll position of a section of `$main-container` based on the `#main-container`? And how to do animate the scroll to it?