scolltop div inside div

Question

I have a div inside another div. When I click the link, the value of scrollTop change always.

The first time, value is correct, but all other times, value change. Sometimes even negative.

HTML CODE

  <div id="head">
    <div onclick="go('#sezione1')" class="link">link 1</div>
    <div onclick="go('#sezione2')" class="link">link 2</div>
     <div onclick="go('#sezione3')" class="link">link 3</div>
     <div onclick="go('#sezione4')" class="link">link 4</div>
  </div>
  <div id="section">
     <div id="sezione1">
       <h1>Sezione 1</h1>
       ...
       lorem
       
     </div>
     </div>
     <div id="sezione2">
       <h1>Sezione 2</h1>
       ...
     </div>
     <div id="sezione3">
       <h1>Sezione 3</h1>
       ...
     </div>
     <div id="sezione4">
       <h1>Sezione 4</h1>
       ...
     </div>
     </div>
  </div>
</div>

<div id="scroll"></div>

CSS CODE

#main{
  border: 2px solid #000000;
  width:500px;
  margin:30px auto;
  height: 60vh;
  overflow-y: scroll;
}

#head{
  background:red;
  color:#ffffff;
  margin:0px;
  height:30px;
  position:fixed;
  width:500px;
}

.link{
  margin:5px;
  cursor:pointer;
  float:left;
}

#section{
margin-top:30px;
}

JS CODE

function go(sezione){
  var scrollPos = $(sezione).offset().top - 60;
  $("#scroll").html("SCROLL POSITION -->"+scrollPos);
  $("#main").animate(
     {
         scrollTop: $(sezione).offset().top - 60,
        },
       800
    );
  scrollpos = 0;
}

I create a pen for my issue. https://codepen.io/salvatorecasalino/pen/mdPmogP

Answer 1

You could use the following.

scrollTop: $(sezione)[0].offsetTop - 60

Demo

function go(sezione) {
  var scrollPos = $(sezione).offset().top - 60;
  $("#scroll").html("SCROLL POSITION -->" + scrollPos);
  $("#main").animate({
      scrollTop: $(sezione)[0].offsetTop - 60,
    },
    800
  );
  scrollpos = 0;
}

#main {
  border: 2px solid #000000;
  width: 500px;
  margin: 30px auto;
  height: 60vh;
  overflow-y: scroll;
}

#head {
  background: red;
  color: #ffffff;
  margin: 0px;
  height: 30px;
  position: fixed;
  width: 500px;
}

.link {
  margin: 5px;
  cursor: pointer;
  float: left;
}

#section {
  margin-top: 30px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <div id="head">
    <div onclick="go('#sezione1')" class="link">link 1</div>
    <div onclick="go('#sezione2')" class="link">link 2</div>
    <div onclick="go('#sezione3')" class="link">link 3</div>
    <div onclick="go('#sezione4')" class="link">link 4</div>
  </div>
  <div id="section">
    <div id="sezione1">
      <h1>Sezione 1</h1>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, sit tempore culpa consequuntur nostrum vero quam molestiae dolorem similique ipsum sed blanditiis non! Odit corporis odio totam velit. A, non? Lorem ipsum dolor sit amet consectetur adipisicing
      elit. Quod, quaerat dicta. Sunt sapiente eaque officiis delectus quo quia nihil magnam vero, assumenda nam laudantium, quis voluptas quaerat aliquam consequatur alias! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatem facere dignissimos
      magnam earum distinctio itaque ut quia ullam eligendi fugit aliquid quasi suscipit iste necessitatibus adipisci magni rem, reiciendis quas. lorem

    </div>
    <div id="sezione2">
      <h1>Sezione 2</h1>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, sit tempore culpa consequuntur nostrum vero quam molestiae dolorem similique ipsum sed blanditiis non! Odit corporis odio totam velit. A, non? Lorem ipsum dolor sit amet consectetur adipisicing
      elit. Quod, quaerat dicta. Sunt sapiente eaque officiis delectus quo quia nihil magnam vero, assumenda nam laudantium, quis voluptas quaerat aliquam consequatur alias!
    </div>
    <div id="sezione3">
      <h1>Sezione 3</h1>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, sit tempore culpa consequuntur nostrum vero quam molestiae dolorem similique ipsum sed blanditiis non! Odit corporis odio totam velit. A, non? Lorem ipsum dolor sit amet consectetur adipisicing
      elit. Quod, quaerat dicta. Sunt sapiente eaque officiis delectus quo quia nihil magnam vero, assumenda nam laudantium, quis voluptas quaerat aliquam consequatur alias!
    </div>
    <div id="sezione4">
      <h1>Sezione 4</h1>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam, sit tempore culpa consequuntur nostrum vero quam molestiae dolorem similique ipsum sed blanditiis non! Odit corporis odio totam velit. A, non? Lorem ipsum dolor sit amet consectetur adipisicing
      elit. Quod, quaerat dicta. Sunt sapiente eaque officiis delectus quo quia nihil magnam vero, assumenda nam laudantium, quis voluptas quaerat aliquam consequatur alias!
    </div>
  </div>
</div>

<div id="scroll"></div>