如何使jQuery scrolltop转到正确的位置

Question

任何人都可以提出为什么scrollTop不滚动到正确的Div的顶部？
我是这样使用的：

$("#generationbutton").click(function() {
      $('.wrapperright').animate({
          scrollTop: $("#generationanxiety").offset().top
        },
        1500);

这是我的完整代码：

$("#generationbutton").click(function() {
  $('.wrapperright').animate({
      scrollTop: $("#generationanxiety").offset().top
    },
    1500);
  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});
var topofDiv = $("#generationanxiety").offset().top; //gets offset div
var height = $("#generationanxiety").outerHeight(); //gets height of div
$('.wrapperright').scroll(function() {
  if ($('.wrapperright').scrollTop() > (topofDiv + height)) {
    console.log('This is where the div bottom leaves the window.')
    $('#generationbutton').addClass('opacity');
  } else {
    $('#generationbutton').removeClass('opacity');
  }
});
$("#lekhenabutton").click(function() {
  $('.wrapperright').animate({
      scrollTop: $("#lekhenaporter").offset().top
    },
    1500);
  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});
var topofDiv = $("#lekhenaporter").offset().top; //gets offset div
var height = $("#lekhenaporter").outerHeight(); //gets height of div
$('#lekhenaporter').scroll(function() {
  if ($('#lekhenaporter').scrollTop() > (topofDiv + height)) {
    console.log('This is where the div bottom leaves the window.')
    $('#lekhenabutton').addClass('opacity');
  } else {
    $('#lekhenabutton').removeClass('opacity');
  }
});
$("#bodysbutton").click(function() {
  $('.wrapperright').animate({
      scrollTop: $("#bodys").offset().top
    },
    1500);
  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});
$("#glitterbutton").click(function() {
  $('.wrapperright').animate({
      scrollTop: $("#glitter").offset().top
    },
    1500);
  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});
$("#juicebutton").click(function() {
  $('.wrapperright').animate({
      scrollTop: $("#juice").offset().top
    },
    1500);
  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});

html,
body {
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 100vw;
  margin: 0;
  grid-gap: 0;
}
.wrapperleft {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-template-rows: auto;
  width: 50vw;
  max-height: 100%;
  overflow-y: hidden;
  margin: 0;
}
.bio {
  margin: 20px;
}
.bio ul {
  margin-top: 20px;
  padding: 0;
}
.bio h1 {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 3.2em;
  list-style: none;
  margin: 0;
  border-bottom: 2px solid #000;
  display: inline;
}
.bio ul li {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 3.2em;
  list-style: none;
  padding-bottom: 10px;
  cursor: pointer;
}
.back {
  position: absolute;
  bottom: 0;
  margin-left: 20px;
}
.back h1 {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 1.5em;
}
.wrapperright {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-template-rows: 200px;
  border-left: 2px solid #000;
  width: 50vw;
  overflow: auto;
}
.wrapperright img {
  width: 50vw;
  max-height: 100%;
  display: block;
}
.opacity {
  opacity: 0.4;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
}
.display {
  display: block;
  max-height: 100%;
  max-width: 100%;
}
.wrapperright div {
  max-height: 100%;
  max-width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="wrapperleft">
    <div class="bio">
      <ul>
        <div id="generationbutton" class="opacity">
          <li>01 Generation Anxiety</li>
        </div>
        <div id="lekhenabutton" class="opacity">
          <li>02 Lekhenaporter.com</li>
        </div>
        <div id="bodysbutton" class="opacity">
          <li>03 Body(s) Under Negotiation</li>
        </div>
        <div id="glitterbutton" class="opacity">
          <li>04 Glitter Boy Cosmetics</li>
        </div>
        <div id="juicebutton" class="opacity">
          <li>05 Juice WRLD Cover Art</li>
        </div>
      </ul>
    </div>
    <div class="back">
      <h1>← Back</h1>
    </div>
  </div>
  <div class="wrapperright">
    <div class="display">
      <img src="http://media-s3-us-east-1.ceros.com/vevo/images/2017/11/07/8d018e81643b41c3561b5ab4f5bf504b/iamddb-contact-sheet1.jpg" />
    </div>
    <div id="generationanxiety">
      <img src="https://dazedimg-dazedgroup.netdna-ssl.com/786/azure/dazed-prod/1180/0/1180791.jpg" />
    </div>
    <div id="lekhenaporter">
      <img src="http://kendrickbrinson.com/wp-content/uploads/2014/03/YoungThug_Portraits-029.jpg" />
    </div>
    <div id="bodys">
      <img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
    </div>
    <div id="glitter">
      <img src="https://4c79id2ej5i11apui01ll2wc-wpengine.netdna-ssl.com/wp-content/uploads/2018/01/IAMDDB-Gallery-3.jpg" />
    </div>
    <div id="juice">
      <img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
    </div>
  </div>
</div>

在Codepen上查看

Answer 1

jQuery的 offset()获得了元素相对于文档的坐标。

因此，例如，您将.wrapperright的滚动位置设置为文档顶部和#generationanxiety顶部之间的距离。这似乎不是您想要的价值。

还请注意，#generationanxiety的偏移随.wrapperright卷轴而变化。
因此，.wrapperright的scrollTop根据当前滚动位置设置为不同的值。

我建议将.wrapperright的scrollTop位置添加到目标元素的偏移顶部：

 scrollTop: $('.wrapperright').scrollTop() + $("#generationanxiety").offset().top

我还建议在动画之前添加.stop(true,false)以防止排队。
请参阅.stop（）。

这是一个演示：

$("#generationbutton").click(function() {
  $('.wrapperright').stop(true, false).animate({
      scrollTop: $('.wrapperright').scrollTop() + $("#generationanxiety").offset().top
    },
    1500);
  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});
var topofDiv = $("#generationanxiety").offset().top; //gets offset div
var height = $("#generationanxiety").outerHeight(); //gets height of div
$('.wrapperright').scroll(function() {
  if ($('.wrapperright').scrollTop() > (topofDiv + height)) {
    $('#generationbutton').addClass('opacity');
  } else {
    $('#generationbutton').removeClass('opacity');
  }
});
$("#lekhenabutton").click(function() {
  $('.wrapperright').stop(true, false).animate({
      scrollTop: $('.wrapperright').scrollTop() + $("#lekhenaporter").offset().top
    },
    1500);
  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});
var topofDiv = $("#lekhenaporter").offset().top; //gets offset div
var height = $("#lekhenaporter").outerHeight(); //gets height of div
$('#lekhenaporter').scroll(function() {
  if ($('#lekhenaporter').scrollTop() > (topofDiv + height)) {
    $('#lekhenabutton').addClass('opacity');
  } else {
    $('#lekhenabutton').removeClass('opacity');
  }
});
$("#bodysbutton").click(function() {
  $('.wrapperright').stop(true, false).animate({
      scrollTop: $('.wrapperright').scrollTop() + $("#bodys").offset().top
    },
    1500);
  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});
$("#glitterbutton").click(function() {
  $('.wrapperright').stop(true, false).animate({
      scrollTop: $('.wrapperright').scrollTop() + $("#glitter").offset().top
    },
    1500);
  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});
$("#juicebutton").click(function() {
  $('.wrapperright').stop(true, false).animate({
      scrollTop: $('.wrapperright').scrollTop() + $("#juice").offset().top
    },
    1500);
  $('.bio ul div').addClass('opacity');
  $(this).removeClass('opacity');
});

html,
body {
  margin: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}
.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  height: 100vh;
  margin: 0;
  grid-gap: 0;
}
.wrapperleft {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-template-rows: auto;
  width: 50vw;
  max-height: 100%;
  overflow-y: hidden;
  margin: 0;
}
.bio {
  margin: 20px;
}
.bio ul {
  margin-top: 20px;
  padding: 0;
}
.bio h1 {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 3.2em;
  list-style: none;
  margin: 0;
  border-bottom: 2px solid #000;
  display: inline;
}
.bio ul li {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 3.2em;
  list-style: none;
  padding-bottom: 10px;
  cursor: pointer;
}
.back {
  position: absolute;
  bottom: 0;
  margin-left: 20px;
}
.back h1 {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 1.5em;
}
.wrapperright {
  grid-column-start: 2;
  grid-column-end: 2;
  grid-template-rows: 200px;
  border-left: 2px solid #000;
  width: 50vw;
  overflow: auto;
}
.wrapperright img {
  width: 50vw;
  max-height: 100%;
  display: block;
}
.opacity {
  opacity: 0.4;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
}
.display {
  display: block;
  max-height: 100%;
  max-width: 100%;
}
.wrapperright div {
  max-height: 100%;
  max-width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="wrapperleft">
    <div class="bio">
      <ul>
        <div id="generationbutton" class="opacity">
          <li>01 Generation Anxiety</li>
        </div>
        <div id="lekhenabutton" class="opacity">
          <li>02 Lekhenaporter.com</li>
        </div>
        <div id="bodysbutton" class="opacity">
          <li>03 Body(s) Under Negotiation</li>
        </div>
        <div id="glitterbutton" class="opacity">
          <li>04 Glitter Boy Cosmetics</li>
        </div>
        <div id="juicebutton" class="opacity">
          <li>05 Juice WRLD Cover Art</li>
        </div>
      </ul>
    </div>
    <div class="back">
      <h1>← Back</h1>
    </div>
  </div>
  <div class="wrapperright">
    <div class="display">
      <img src="http://media-s3-us-east-1.ceros.com/vevo/images/2017/11/07/8d018e81643b41c3561b5ab4f5bf504b/iamddb-contact-sheet1.jpg" />
    </div>
    <div id="generationanxiety">
      generationanxiety
      <img src="https://dazedimg-dazedgroup.netdna-ssl.com/786/azure/dazed-prod/1180/0/1180791.jpg" />
    </div>
    <div id="lekhenaporter">
      lekhenaporter
      <img src="https://media.gq.com/photos/56bd025d63efb0fb31652324/16:9/w_1280%2Cc_limit/young_thug_longread.jpg" />
    </div>
    <div id="bodys">
      bodys
      <img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
    </div>
    <div id="glitter">
      glitter
      <img src="https://4c79id2ej5i11apui01ll2wc-wpengine.netdna-ssl.com/wp-content/uploads/2018/01/IAMDDB-Gallery-3.jpg" />
    </div>
    <div id="juice">
      juice
      <img src="https://www.thunderstudios.com/wp-content/uploads/2016/03/Calvin-15.jpg" />
    </div>
  </div>
</div>

相关：
为什么我滚动父时position（）。

最高的变化？

---

编辑

正如您提到的，最后一个图像正在裁剪。我注意到.wrapper设置为height: 100vw而不是height: 100vh（视口宽度而不是高度）。我编辑了演示以反映这种变化。

此外，<ul>元素只能包含"零或更多<li>元素"，因此<div>作为<ul>的孩子无效。我建议删除<div>元素并相应调整JavaScript。

我还建议优化您的代码更模块化和干燥（不要重复自己）。如果您有兴趣，这是一篇详细的帖子，描述了类似上下文中一些有益的优化。