Clicking on divs doesn't scroll to elements as it should using jQuery

Question

I have the following code with click handlers:

$(document).ready(function() {
  $('.black-btn').click(function() {
    $('.popup-cats-wrapper').animate({
      scrollTop: $(".black-anchor").offset().top - 100
    }, 400)
  });
  $('.red-btn').click(function() {
    $('.popup-cats-wrapper').animate({
      scrollTop: $(".red-anchor").offset().top - 100
    }, 400)
  });
  $('.green-btn').click(function() {
    $('.popup-cats-wrapper').animate({
      scrollTop: $(".green-anchor").offset().top - 100
    }, 400)
  });
  $('.blue-btn').click(function() {
    $('.popup-cats-wrapper').animate({
      scrollTop: $(".blue-anchor").offset().top - 100
    }, 400)
  });


});

body {
  font-size: 12px;
  font-family: "sans";
}

.hero-categories-wrap {
  overflow: hidden;
  height: 200px;
}

.popup-cats-wrapper {
  height: 200px;
  width: 300px;
  background: #aaa;
  display: inline-block;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 0px;
  overflow-x: auto;
}

.categories-sidebar {
  width: 120px;
  background: #ececef;
  height: 200px;
  padding-top: 20px;
  float: left;
}

.popup-menu-row {
  padding: 5px 8px;
  color: #212121;
  font-weight: 600;
  cursor: pointer;
  border-radius: 25px;
  margin-bottom: 5px;
}

.color-block {
  margin-bottom: 10px;
  margin-top: 25px;
}

.cat-title {
  font-weight: 600;
  font-size: 12px;
  color: #000;
  margin-bottom: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="hero-categories-wrap">

  <div class="categories-sidebar">
    <div class="popup-menu-row black-btn">BLACK</div>
    <div class="popup-menu-row red-btn">RED</div>
    <div class="popup-menu-row green-btn">GREEN</div>
    <div class="popup-menu-row blue-btn">BLUE</div>
  </div>
  <div class="popup-cats-wrapper">

    <div class="color-block">
      <div class="cat-title black-anchor">BLACK COLOR</div>
      <div class="cat-description">Black is the darkest color, the result of the absence or complete absorption of visible light. It is an achromatic color, a color without hue, like white and gray.</div>
    </div>

    <div class="color-block">
      <div class="cat-title red-anchor">RED COLOR</div>
      <div class="cat-description">Red is the color at the end of the visible spectrum of light, next to orange and opposite violet. It has a dominant wavelength of approximately 625–740 nanometres. It is a primary color in the RGB color model and the CMYK color model, and is the
        complementary color of cyan.</div>
    </div>


    <div class="color-block">
      <div class="cat-title green-anchor">GREEN COLOR</div>
      <div class="cat-description">Green is the color between blue and yellow on the visible spectrum. It is evoked by light which has a dominant wavelength of roughly 495–570 nm. </div>
    </div>

    <div class="color-block">
      <div class="cat-title blue-anchor">BLUE COLOR</div>
      <div class="cat-description">Blue is one of the three primary colours of pigments in painting and traditional colour theory, as well as in the RGB colour model. It lies between violet and green on the spectrum of visible light. The eye perceives blue when observing light with
        a dominant wavelength between approximately 450 and 495 nanometres. Most blues contain a slight mixture of other colours; azure contains some green, while ultramarine contains some violet.</div>
    </div>

  </div>
</div>

Unfortunately when i click on any of the buttons(divs) at the left side, the anchor links at the right side have very strange behavior. On the other hand if you try to click the same btn (eg green-btn) more than once it scrolls the content up and down !

What i 'm doing wrong?

Those aren't anchor links. You should be using anchor tags for accessibility, and just [animate that](https://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link). — isherwood, Sep 23 '19 at 14:46
Part of the problem is that class selectors return an array of elements, so the script doesn't know which one you mean. You'd need to specify the zero index of your list (and then be sure you only have one such class in your document). Anchor links typically target unique IDs. — isherwood, Sep 23 '19 at 14:47

score 1 · Accepted Answer · answered Sep 23 '19 at 15:23

Your issue is that .offset().top is giving you the current offset that element is to its parent, which you then use to set the parents scrollTop to. What you need to do is add the elements .offset().top to the current scrollTop of the parent.

$(document).ready(function() {
  
  var $wrapper = $('.popup-cats-wrapper');

  $('.black-btn').click(function() {
    $wrapper.animate({
      scrollTop: $wrapper.scrollTop() + $(".black-anchor").offset().top - 10
    }, 400)
  });
  $('.red-btn').click(function() {
    $wrapper.animate({
      scrollTop: $wrapper.scrollTop() + $(".red-anchor").offset().top - 10
    }, 400)
  });
  $('.green-btn').click(function() {
    $wrapper.animate({
      scrollTop: $wrapper.scrollTop() + $(".green-anchor").offset().top - 10
    }, 400)
  });
  $('.blue-btn').click(function() {
    $wrapper.animate({
      scrollTop: $wrapper.scrollTop() + $(".blue-anchor").offset().top - 10
    }, 400)
  });


});

body {
  font-size: 12px;
  font-family: "sans";
}

.hero-categories-wrap {
  overflow: hidden;
  height: 200px;
}

.popup-cats-wrapper {
  height: 200px;
  width: 300px;
  background: #aaa;
  display: inline-block;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 0px;
  overflow-x: auto;
}

.categories-sidebar {
  width: 120px;
  background: #ececef;
  height: 200px;
  padding-top: 20px;
  float: left;
}

.popup-menu-row {
  padding: 5px 8px;
  color: #212121;
  font-weight: 600;
  cursor: pointer;
  border-radius: 25px;
  margin-bottom: 5px;
}

.color-block {
  margin-bottom: 10px;
  margin-top: 25px;
}

.cat-title {
  font-weight: 600;
  font-size: 12px;
  color: #000;
  margin-bottom: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="hero-categories-wrap">

  <div class="categories-sidebar">
    <div class="popup-menu-row black-btn">BLACK</div>
    <div class="popup-menu-row red-btn">RED</div>
    <div class="popup-menu-row green-btn">GREEN</div>
    <div class="popup-menu-row blue-btn">BLUE</div>
  </div>
  <div class="popup-cats-wrapper">

    <div class="color-block">
      <div class="cat-title black-anchor">BLACK COLOR</div>
      <div class="cat-description">Black is the darkest color, the result of the absence or complete absorption of visible light. It is an achromatic color, a color without hue, like white and gray.</div>
    </div>

    <div class="color-block">
      <div class="cat-title red-anchor">RED COLOR</div>
      <div class="cat-description">Red is the color at the end of the visible spectrum of light, next to orange and opposite violet. It has a dominant wavelength of approximately 625–740 nanometres. It is a primary color in the RGB color model and the CMYK color model, and is the
        complementary color of cyan.</div>
    </div>


    <div class="color-block">
      <div class="cat-title green-anchor">GREEN COLOR</div>
      <div class="cat-description">Green is the color between blue and yellow on the visible spectrum. It is evoked by light which has a dominant wavelength of roughly 495–570 nm. </div>
    </div>

    <div class="color-block">
      <div class="cat-title blue-anchor">BLUE COLOR</div>
      <div class="cat-description">Blue is one of the three primary colours of pigments in painting and traditional colour theory, as well as in the RGB colour model. It lies between violet and green on the spectrum of visible light. The eye perceives blue when observing light with
        a dominant wavelength between approximately 450 and 495 nanometres. Most blues contain a slight mixture of other colours; azure contains some green, while ultramarine contains some violet.</div>
    </div>

  </div>
</div>

Clicking on divs doesn't scroll to elements as it should using jQuery

1 Answers1