animate {ScrollTop} not working correctly for header(<h4>) tags

Question

I have an application in which I have to scroll questions on the basis of label clicked, The issue is it's not picking up the right height from the offset().top. According to the clicked label, I have to scroll up and down. I have Question structure like this

// I am doing something like this, this is the part of the function which is triggered when a particular label is clicked.


     <a class="set-label" position: relative;" id="hidelabelBRAND">     
     BRAND </a><br>
     
     <a class="set-label" style="margin-right:5px; float: right; 
     position: relative;" id="hidelabelSTYLING"> STYLING </a><br>
     
     <a class="set-label lastdisplay" style="margin-right:5px; float:        
     right; position: relative;" id="hidelabelStyle cat"> Style cat   
     </a><br>    

$(document).on("click", ".set-label", function(e) {
      var clickedLabel = $(this).text().trim();
      var dim = $(this).parent().parent().next().find('h4');
      var findTag = $(dim).filter(function() {
        if ($(this).text().toString() == clickedLabel.toString()) {
          $('div[class="parentquestion"]').animate({
            scrollTop: $(this).offset().top
          }, 'slow');
        }
      });
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentquestion" id="parentQues">
  <h4>BRAND</h4>
  <div class="labelsBRAND" style="position: relative;" id="question9">
    <h2> Why so serious</h2>
    <textarea name="commit[9]"></textarea>
  </div>
  <h4>STYLING</h4>
  <div class="labelsSTYLING" style="position: relative;" id="question35">
    <h2> testing this demo</h2>
    <textarea name="commit[10]"></textarea>
  </div>
  <h4>Style cat</h4>
  <div class="labelsStyle cat" style="position: relative;" id="question53">
    <h2> propaganda invasion</h2>
    <textarea name="commit[11]"></textarea>
  </div>
</div>

this is my css for parentquestion

    .parentquestion {
    overflow-y: scroll;
    float: left;
    width: 80%;
    height: 490px;
    margin-top: 70px; 
}

may be thats creating issue.

when I click any label its scrolls up and down but not to the required tag. Am I doing something wrong? Is offset() correctly calculating the height in reference to its parent which is $('div[class="parentquestion"]').

Answer 1

well i finally solved it myself,

$(document).on("click", ".set-label", function(e) {
  var clickedLabel = $(this).text().trim();
  var dim = $(this).parent().parent().next().find('h4');
  var findTag = $(dim).filter(function() {
  if ($(this).text().toString() == clickedLabel.toString()) {
  var childOffset = $(this).position().top + $('.parentquestion').scrollTop() - $(this).height();
      $('div[class="parentquestion"]').animate({
        scrollTop: childOffset}, 'slow');
    }
  });
})

The trick was to calculate its current position $(this).position().top and add it to its parent height which is $('.parentquestion').scrollTop() and i was getting extra height of that tag so I subtracted it from it using $(this).height()

And I have to use $('div[class="parentquestion"]').animate as I want only this particular div to be scrollable, not the whole document as I have many div's on my page, Hope this will help all.

Answer 2

This may help you. I use $('html, body') instead of $('div[class="parentquestion"]') and place all the set-label element to single div.

// I am doing something like this, this is the part of the function which is triggered when a particular label is clicked.

$(document).on("click", ".set-label", function(e) {
      
      var clickedLabel = $(this).text().trim();
      var dim = $(this).parent().next().find('h4');
      
      var findTag = $(dim).filter(function() {
        
        if ($(this).text().toString() == clickedLabel.toString()) {
                    
          $('html, body').animate({
            scrollTop: $(this).offset().top
          },'slow');
        }
      });
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a class="set-label">BRAND </a>

<a class="set-label">STYLING </a>
<a class="set-label">Style cat </a>

</div>
<div class="parentquestion" id="parentQues">
  <h4>BRAND</h4>
  <div class="labelsBRAND" style="position: relative;" id="question9">
    <h2> Why so serious</h2>
    <textarea name="commit[9]"></textarea>
  </div>
  <h4>STYLING</h4>
  <div class="labelsSTYLING" style="position: relative;" id="question35">
    <h2> testing this demo</h2>
    <textarea name="commit[10]"></textarea>
  </div>
  <h4>Style cat</h4>
  <div class="labelsStyle cat" style="position: relative;" id="question53">
    <h2> propaganda invasion</h2>
    <textarea name="commit[11]"></textarea>
  </div>
  <h4>head 4</h4>
  <div class="labelsStyle cat" style="position: relative;" id="question53">
    <h2> sub head 4</h2>
    <textarea name="commit[11]"></textarea>
  </div>
  <h4>head 5</h4>
  <div class="labelsStyle cat" style="position: relative;" id="question53">
    <h2> subhead 5</h2>
    <textarea name="commit[11]"></textarea>
  </div>
</div>

Answer 3

You need to define an Id for the h2 tags. ...