jQuery scrollTop() doesn't work and returns zero

Question

I'm trying to convert JavaScript into jQuery but it doesn't seem to work (alert returns zero). In this thread "scrollheight of an element gives undefined value" I've learned that I should use scrollTop() jQuery function but it doesn't return what I want.

Edit:

HTML code:

Istorija (paspauskite)

<div class="panel">
    <table>
        <tr style="border-top: none;">
            <td>Dėl tvarkos, visi sąrašai yra 30 įrašų ilgio, išskyrus sąskaitos papildymus bei lėšų išsiėmimus.</td>
        </tr>
    </table>
</div>
<div class="panel-nested-parent active" style="max-height: 94px;">
    <table>
        <tbody>
            <tr>
                <th>Pelnas nuo įsigytų (1 kaimynas)</th>
            </tr>
        </tbody>
    </table>
    <table>
        <tbody>
            <tr style="border: none;">
                <td style="vertical-align: top; padding: 0;">
                    <button style="border-right: none;" class="accordion-nested">Gyvulių (5%)</button>
                    <div class="panel-nested">
                        <table>
                            <tbody>
                                <tr style="border: none;">
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Gyvulys</th>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Kiekis</th>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1; border-right: 1px solid #1f76a1;">Pelnas</th>
                                </tr>
                                <tr>
                                    <td>Višta</td>
                                    <td>1 vnt.</td>
                                    <td>1 Eur</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
                <td style="vertical-align: top; padding: 0;">
                    <button style="border-right: none;" class="accordion-nested">Fermų (10%)</button>
                    <div class="panel-nested">
                        <table>
                            <tbody>
                                <tr>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Ferma</th>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Kiekis</th>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1; border-right: 1px solid #1f76a1;">Pelnas</th>
                                </tr>
                                <tr>
                                    <td>Vištidė</td>
                                    <td>1 vnt.</td>
                                    <td>1 Eur</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
                <td style="vertical-align: top; padding: 0;">
                    <button style="border-right: none;" class="accordion-nested">Fabrikų (10%)</button>
                    <div class="panel-nested">
                        <table>
                            <tbody>
                                <tr>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Fabrikas</th>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Kiekis</th>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1; border-right: 1px solid #1f76a1;">Pelnas</th>
                                </tr>
                                <tr>
                                    <td>Tešlos</td>
                                    <td>1 vnt.</td>
                                    <td>1 Eur</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
                <td style="vertical-align: top; padding: 0;">
                    <button class="accordion-nested">Kepyklų (10%)</button>
                    <div class="panel-nested">
                        <table>
                            <tbody>
                                <tr>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Kepykla</th>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1;">Kiekis</th>
                                    <th style="background: #21aedb; border-left: 1px solid #1f76a1; border-right: 1px solid #1f76a1;">Pelnas</th>
                                </tr>
                                <tr>
                                    <td>Blynų su mėsa</td>
                                    <td>1 vnt.</td>
                                    <td>1 Eur</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>


var accHeader = document.getElementsByClassName("accordion-header");
var acc = document.getElementsByClassName("accordion");
var accNestedParent = document.getElementsByClassName("accordion-nested-parent");
var accNested = document.getElementsByClassName("accordion-nested");
var panelNested = document.getElementsByClassName("panel-nested");

JS Works:

for (i = 0; i < accHeader.length; i++) {
    accHeader[i].onclick = function() {
        if ($(this).hasClass('active')) {
            $('.accordion').removeClass('active');
            $('.accordion-header').removeClass('active');
            $('.panel').removeClass('active');
            $('.panel').css('max-height', '');
            $(this).next().next().removeClass("top-border");
        } else {
            $('.accordion').removeClass('active');
            $('.accordion-header').removeClass('active');
            $('.panel').removeClass('active');
            $('.panel').css('max-height', '');
            $(this).next().next().removeClass("top-border");

            var accPanel = this.nextElementSibling;
            var nextAcc = this.nextElementSibling.nextElementSibling;

            $(this).addClass("active");
            $(this).next().addClass('active');
            $(this).next().next().addClass("top-border");
            if (accPanel.style.maxHeight) {
                accPanel.style.maxHeight = null;
            } else {
                accPanel.style.maxHeight = accPanel.scrollHeight + "px";
            }
            alert(accPanel.scrollHeight);
        }
    }
}

jQuery doesn't work:

for (i = 0; i < accNested.length; i++) {
    accNested[i].onclick = function() {
        if ($(this).hasClass('active')) {
            $('.panel').removeClass('active');
            $('.panel').css('max-height', '');
            $('.panel-nested').removeClass('active');
            $('.panel-nested').css('max-height', '');
            $('.accordion').removeClass('active');
            $('.accordion-header').removeClass('active');
            $('.accordion-nested').removeClass('active');
            $(this).next().next().removeClass("top-border");
        } else {
            $('.panel').removeClass('active');
            $('.panel').css('max-height', '');
            $('.panel-nested').removeClass('active');
            $('.panel-nested').css('max-height', '');
            $('.accordion').removeClass('active');
            $('.accordion-header').removeClass('active');
            $('.accordion-nested').removeClass('active');
            $(this).next().next().removeClass("top-border");

            var accPanel = $('.panel');
            var nextAcc = this.nextElementSibling.nextElementSibling;

            $('.panel-nested').addClass("active");
            $('.accordion-nested').addClass('active');
            $('.accordion-nested').addClass("top-border");
            if (accPanel.css('max-height')) {
                accPanel.css('max-height', '');
            } else {
                accPanel.css('max-height', accPanel.scrollTop() + "px");
            }
            alert(accPanel.scrollTop());
        }
    }
}

score 1 · Answer 1 · answered Jun 27 '17 at 11:08

1

I think you are using the jQuery scrollTop() function improperly. It is not a CSS propery that you can assign to an element.

Indeed, it is a function, so you cannot do :

accPanel.css('max-height', accPanel.scrollTop() + "px")

If you want to add as CSS property the max-height you should use .height:

accPanel.height();

Hope this could help,

Laura.

answered Jun 27 '17 at 11:08

L. Merlo

361
5
10

Okay ,lets solve it. You need to set css max-heigth equal to the accPanel.height() right? – L. Merlo Jun 27 '17 at 11:53
Try with the new answer, hope this could help. – L. Merlo Jun 27 '17 at 12:50

score 1 · Accepted Answer · answered Jun 27 '17 at 12:49

Here there is -I hope- the result you want to achieve:

<!DOCTYPE html>
<html>
<head>
<script>*INCLUDE YOUR JQUERY LIBRARY*</script>
    <style type="text/css">
        #div{
            border: 1px solid black;
            width:900px;
            height: 900px;
            max-height: 2px;
        }
    </style>
</head>
<body>
    <div id="div">My div</div>
</body>
    <script type="text/javascript">
    $(document).ready(function() {
        var accPanel = $('#div');
        var maxHeigth = $('#div').css( "max-height" );
        var height = accPanel.height();
        if (maxHeigth == 'none') {
            console.log('No max-height set by default.')
            console.log('Changing to ', height)
            accPanel.css('max-height', accPanel.height() + "px");
        } else {
            console.log('Currently it has max-height equal to ', height)
            console.log('Changing to 0px');
            accPanel.css('max-height', '0px');
        }
    });
    </script>
</html>

Try it in your browser as it is, I've added some log shown into the console that should help.

Let me know, Laura

jQuery scrollTop() doesn't work and returns zero

2 Answers2