Scroll To Top

By default, the paging controls of a DataTable (the Next, Previous and page number buttons) are placed beneath the table. If you have a large number of rows which won't fit on a single page, when the page is changed, the user has to scroll up to the top to see the first few rows. In this blog post I introduce a very simple feature plug-in called scrollToTop which, when enabled, will automatically scroll to the head of the table whenever the page is changed.

An example is shown below. Scroll down to the paging button and click one to see it in action.

Usage

To use the scrollToTop plug-in, first include its JavaScript on your page:

Then enable it by specifying the scrollToTop option in your DataTables initialisation:

$('#myTable').DataTable({
    scrollToTop: true
});

Implementation

The actual action of moving the scroll position is very simple! It listens for the draw event, and moves the scroll position of the document to show the top of the table container:

api.on('page', function() {
    setTimeout(function() {
        $(document).scrollTop(
            $(api.table().container()).offset().top
        );
    }, 10);
});

As always, please post any support questions in the forum, or if you have improvement suggestions for this script comment below. Likewise, let us know if you'd like to see any specific plug-ins developed in future!