Reset the scroll position to top as default for page navigation?

choc

Link to test case: https://datatables.net/examples/basic_init/scroll_xy.html
Description of problem:
I wonder if it would be more intuitive to display the next page with the position at the top when switching to a different page number?

In the link, set the 10 entries per page to 25, and scroll to bottom and then click Page 2. The table stays at where it was.
So if someone navigate through the table pages, they have to scroll up for every page navigation.

It would be nice if this behavior were the default and if someone wanted to keep the same position, they could control it.
(Personally, I feel it's strange to keep the same position after page navigation.)

Like this forum, navigate from https://datatables.net/forums/discussions to https://datatables.net/forums/discussions/p2 will return to the top as well.

choc

I've made a commit to fullfil this: https://github.com/DataTables/DataTablesSrc/commit/ec98d842a7970c821b5502f954a24f7251cd86b5

If this is agreed, I can create PR. Thanks!

kthorngren

Another option is to use the page event and scroll to the top of the scroll body after each page. Paste this code into the example you linked to:

$('#example').on('page.dt', function () {
  $('#example').DataTable().table().container().getElementsByClassName('dt-scroll-body')[0].scrollTop = 0
});

Kevin

choc

Thanks Kevin, yes, that'll work. (JS Bin)

I'm thinking perhaps this can be default as I have around 10 tables (using React) and it's a bit tedious to listen onPage (React Event) on all tables.

This behavior is also more intuitive, just like sorting and filtering, both jump to the top by default. And normally, these three things happen together during normal use.

kthorngren

It's up to @allan as far as making the behavior change a default behavior. Makes sense to me but it would change the behavior for others and they may not expect it.

Kevin

kthorngren

I’m not familiar with React but possibly you can use ‘document’ as the selector instead of ‘$(“#example”)’ so it only needs executed once for all tables on the page.

Kevin

allan

There have been a couple of questions about how to do this over the years, but it isn't something that I've felt needed put into DataTables core as the default behaviour.

Possibly it would be suitable for an option in the paging feature - paging.autoScroll or paging.scrollTop. Then it could be enabled if someone wants it.

Allan