Scrolling using offset().top goes to the wrong place

Question

I have a page containing two divs - one contains a table and is not a fixed height, the other contains multiple tables and is a fixed height (with auto overflow-y) based on the first div.

HTML:

<div id="tables-container" style="height: 100vh;">
    <div id="outstanding-table">
        <table>
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                    <td>Column 3</td>
                </tr>
                ...more rows...
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                    <td>Column 3</td>
                </tr>
            </tbody>
        </table>
    </div>

    <hr>

    <div id="overview-tables" style="overflow-y: auto;">
        <h3 id="table-1">Table 1</h3>
        <table>
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                    <td>Column 3</td>
                </tr>
                ...more rows...
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                    <td>Column 3</td>
                </tr>
            </tbody>
        </table>

        <h3 id="table-2">Table 2</h3>
        <table>
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                    <td>Column 3</td>
                </tr>
                ...more rows...
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                    <td>Column 3</td>
                </tr>
            </tbody>
        </table>

        <h3 id="table-3">Table 3</h3>
        <table>
            <thead>
                <tr>
                    <th>Column 1</th>
                    <th>Column 2</th>
                    <th>Column 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                    <td>Column 3</td>
                </tr>
                ...more rows...
                <tr>
                    <td>Column 1</td>
                    <td>Column 2</td>
                    <td>Column 3</td>
                </tr>
            </tbody>
        </table>
        ...more tables...
    </div>
</div>

JS:

$(document).ready(function () {
    var overviewTablesHeight = $('#tables-container').innerHeight() - $('#outstanding-table').innerHeight() - 50;
    $('#overview-tables').innerHeight(overviewTablesHeight);

    var timeoutTime = 1000;
    var tableId = getFirstTableId();

    scrollDown();

    function getFirstTableId() {
        var id = 'table-1';
        return id;
    }

    function getNextTableId() {
        var tableIdParts = tableId.split('-');
        var id = tableIdParts[0] + '-' + (parseInt(tableIdParts[1]) + 1);
        return id;
    }

    function scrollDown() {
        setTimeout(function () {
            tableId = getNextTableId();

            var scrollTo = $('#' + tableId).position().top - $('#overview-tables').offset().top;
            console.log($('#' + tableId).offset().top + ' - ' + $('#overview-tables').offset().top + ' = ' + scrollTo);
            scroll(scrollTo);

            var isBottom = $('#overview-tables').scrollTop() + $('#overview-tables').innerHeight() >= $('#overview-tables')[0].scrollHeight;
            if (isBottom) {
                scrollUp();
            }
            else {
                scrollDown();
            }
        }, timeoutTime);
    }

    function scrollUp() {
        setTimeout(function () {
            scroll(0);
            tableId = getFirstTableId();
            scrollDown();
        }, timeoutTime);
    }

    function scroll(scrollTopValue) {
        $('#overview-tables').animate({ scrollTop: scrollTopValue }, 'fast');
    }
});

I'm trying to get the bottom section to automatically scroll down to each h3 in turn (using the idea from this answer) until it reaches the bottom, at which point it will scroll back to the top and start again. However, offset().top doesn't seem to be giving the correct values. For example, the third table will have a lower offset value than the second, causing it to scroll up a bit, instead of down.

Here is a Bootply to show the problem. I've added console logs so you can see the values being calculated.

I've already had a look at these questions, but all seem to be talking about checking the margins, images, padding etc, but in my Bootply above I have no margins, plus the incorrect values do not seem to be out by the same amount each time:

score 0 · Accepted Answer · edited May 23 '17 at 12:32

I just found this answer which almost fixed my scroll problem, however I had to add a bit extra for it to work correctly in my situation. This is my updated scrollDown function:

function scrollDown() {
    setTimeout(function () {
        tableId = getNextTableId();

        var scrollTo = $('#' + tableId).position().top + $('#overview-tables').scrollTop() - $('#outstanding-table').innerHeight();
        scroll(scrollTo);

        var isBottom = $('#overview-tables').scrollTop() + $('#overview-tables').innerHeight() >= $('#overview-tables')[0].scrollHeight;
        if (isBottom) {
            scrollUp();
        }
        else {
            scrollDown();
        }
    }, timeoutTime);
}

Scrolling using offset().top goes to the wrong place

1 Answers1