div内部的scolltop div

问题描述

我在另一个div内有一个div。当我单击链接时，scrollTop的值始终会更改。

第一次，值是正确的，但其他所有时间，值都会更改。有时甚至是负面的。

HTML代码

  <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代码

#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代码

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

我为我的问题创作了一支笔。 https://codepen.io/salvatorecasalino/pen/mdPmogP

解决方法

您可以使用以下内容。

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

演示

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,quis voluptas quaerat aliquam consequatur alias!
    </div>
    <div id="sezione3">
      <h1>Sezione 3</h1>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam,quis voluptas quaerat aliquam consequatur alias!
    </div>
    <div id="sezione4">
      <h1>Sezione 4</h1>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam,quis voluptas quaerat aliquam consequatur alias!
    </div>
  </div>
</div>

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