How to make Jquery scrollTop go to the right position?

Question

Can anyone suggest why scrollTop is not scrolling to the top of the correct div?
I'm using it like this:

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

Here is my complete code:

$("#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>

View on CodePen

Answer 1

jQuery's offset() gets the coordinates of the element relative to the document.

So, for example, you're setting the scroll position of .wrapperright to the distance between the top of the document and the top of #generationanxiety. That doesn't seem to be the value you want.

Also note that the offset of #generationanxiety changes as .wrapperright scrolls.
So scrollTop of .wrapperright is set to a different value depending on its current scroll position.

I suggest adding the scrollTop position of .wrapperright to the offset top of the target element:

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

I also suggest adding .stop(true,false) before your animations in order to prevent queuing.
See .stop().

Here's a demonstration:

$("#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>

Related:
Why is position().top changing when I scroll the parent?

---

Edit

As you mentioned, the last image was being cropped. I noticed that .wrapper was set to height: 100vw instead of height: 100vh (viewport width instead of height). I edited the demo to reflect that change.

Also, <ul> elements can only contain "zero or more <li> elements", so a <div> as a child of a <ul> is not valid. I recommend removing the <div> elements and adjusting your JavaScript accordingly.

I also recommend optimizing your code to be a bit more modular and DRY (Don't Repeat Yourself). If you're interested, here's a detailed post that describes some beneficial optimizations in a similar context.