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)

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);
        }
    }
}

JS Works:

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());
        }
    }
}

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()); } } } 

Answer 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.

Answer 2

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