0

I'm having a problem using a jQuery scrollTop() function with $.each. Every time, no matter how many <div class="panel"></div> elements are, scrollTop() function returns zero. I've used code in the Get height of multiple divs with jquery thread, only changed height() to scrollTop() function (height() still returns zero).

Here is the code that I've created, so it will be much easier to understand the problem.

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }
  }
}

var $panel = $('.panel'),
  totalHeight = 0;

$.each($panel, function() {
  totalHeight += $(this).scrollTop();
});

alert(totalHeight);
button.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

button.accordion.active,
button.accordion:hover {
  background-color: #ddd;
}

button.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

button.accordion.active:after {
  content: "\2212";
}

div.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="accordion">Lėšų išsiėmimai</button>
<div class="panel">
  <div>
  </div>
  <table>
    <tbody>
      <tr>
        <th>Data</th>
        <th>12 val.</th>
        <th>0.01 Eur</th>
        <th>Data</th>
        <th>24 val.</th>
        <th>0.02 Eur</th>
      </tr>

      <tr>
        <td colspan="3"></td>
        <td>2017-06-26 01:39:16</td>
        <td colspan="2">+</td>
      </tr>

      <tr>
        <td colspan="3"></td>
        <td>2017-06-24 14:43:50</td>
        <td colspan="2">+</td>
      </tr>
      <tr>
        <td>2017-06-24 14:43:27</td>
        <td colspan="2">+</td>

        <td>2017-06-15 14:43:43</td>
        <td colspan="2">+</td>
      </tr>
      <tr>
        <td>2017-06-15 14:42:23</td>
        <td colspan="2">+</td>

        <td>2017-06-07 16:34:04</td>
        <td colspan="2">+</td>
      </tr>
      <tr>
        <td>2017-06-07 16:33:36</td>
        <td colspan="2">+</td>

        <td>1970-01-01 03:00:00</td>
        <td colspan="2">+</td>
      </tr>
      <tr>
        <td>2017-06-06 15:13:41</td>
        <td colspan="2">+</td>

        <td>1970-01-01 03:00:00</td>
        <td colspan="2">+</td>
      </tr>
      <tr>
        <td style="background: #0E82A7;">Iš viso</td>
        <td style="background: #0E82A7;" colspan="2">0.0400 Eur</td>
        <td style="background: #0E82A7;"></td>
        <td style="background: #0E82A7;" colspan="2">0.1200 Eur</td>
      </tr>

    </tbody>
  </table>
</div>
<div class="panel">
  <div>
  </div>
  <table>
    <tbody>
      <tr>
        <th>Data</th>
        <th>12 val.</th>
        <th>0.01 Eur</th>
        <th>Data</th>
        <th>24 val.</th>
        <th>0.02 Eur</th>
      </tr>

      <tr>
        <td colspan="3"></td>
        <td>2017-06-26 01:39:16</td>
        <td colspan="2">+</td>
      </tr>

      <tr>
        <td colspan="3"></td>
        <td>2017-06-24 14:43:50</td>
        <td colspan="2">+</td>
      </tr>
      <tr>
        <td>2017-06-24 14:43:27</td>
        <td colspan="2">+</td>

        <td>2017-06-15 14:43:43</td>
        <td colspan="2">+</td>
      </tr>
      <tr>
        <td>2017-06-15 14:42:23</td>
        <td colspan="2">+</td>

        <td>2017-06-07 16:34:04</td>
        <td colspan="2">+</td>
      </tr>
      <tr>
        <td>2017-06-07 16:33:36</td>
        <td colspan="2">+</td>

        <td>1970-01-01 03:00:00</td>
        <td colspan="2">+</td>
      </tr>
      <tr>
        <td>2017-06-06 15:13:41</td>
        <td colspan="2">+</td>

        <td>1970-01-01 03:00:00</td>
        <td colspan="2">+</td>
      </tr>
      <tr>
        <td style="background: #0E82A7;">Iš viso</td>
        <td style="background: #0E82A7;" colspan="2">0.0400 Eur</td>
        <td style="background: #0E82A7;"></td>
        <td style="background: #0E82A7;" colspan="2">0.1200 Eur</td>
      </tr>

    </tbody>
  </table>
</div>
Barmar
  • 741,623
  • 53
  • 500
  • 612
Lukas Naujokaitis
  • 109
  • 12

1 Answers1

0

Clearly height property will return 0 as your panels are set to 

max-height:0;

When the code runs. Now, the function:

scrollTop()

Will check the scroll of window, what you are probably looking for is:

$(this).offset().top

Here is the fiddle: https://jsfiddle.net/08gccLph/

Hope that helps :)

durian
  • 510
  • 1
  • 7
  • 24