Next page button doesn't take you to top of next page

[PaulClark2]

Summary

When moving from one page to another on and data table, the next page button takes the user to the bottom of the next page of the data table.

Expected Behavior

When a user clicks the next page button at the bottom of a data table, the user should be taken to the top of the next page of the data table.

Frequency

• This is an ongoing, predictable issue

How to Reproduce

URL: https://www.fec.gov/data/receipts/?committee_id=C00213512&two_year_transaction_period=2020&cycle=2020&line_number=F3-11AI&data_type=processed

1. Scroll to bottom of page
2. Click next page

Browser

Which version of which browser are you using? Does this issue occur with other browsers or with other browser sizes?

• Safari, version: …iOS 12.3.1

Device

Tell us what you can about your device and its operating system.

• Safari iOS 12.3.1 (This is an issue in all browsers)

  Screenshots

FYI: A similar issue was reported about FEC Notify. EFO is taking care of the pagination issues of FEC Notify. EFO expects to deploy a fix to FEC Notify on 7/11 or 7/17.

[johnnyporkchops]

We could add a helper function to move to top of datatable on-click of paginate button:

helpers.js

function scrollTo(target, elm) {
  $('body').on('click',target, function() {
    $(window).scrollTop($(elm).offset().top);

  });
}

tables.js (@line 481)

DataTable.prototype.initTable = function() {
  helpers.scrollTo('.paginate_button', '.data-container')
 ...

This seems to work in some preliminary tests but we would probably need to add a check if the .data_container is !undefined to avoid console errors on profile pages(and any other pages) with paginate buttons. Also look at datables.net built in scroll methods

UPDATE: 1) A helper like the one above is not that reusable (cant think of other many instances where we would want the same interaction) 2) Using a helper makes the function more general and thus gives undefined errors in console 3) Referencing window.offset in Jquery 3.X is a know issue that returns error Uncaught TypeError: elem.getClientRects is not a function https://github.com/jquery/jquery/issues/3992 So....maybe we should use this function that does not throw console errors:

$('body').on('click','.paginate_button', function() {
    $('html, body').animate({
      scrollTop: $(".data-container__wrapper").offset().top
    });
  });

[PaulClark2]

@johnnyporkchops thanks! Do you have bandwidth to take this on this sprint or next sprint?

[johnnyporkchops]

One thing to point out about this is that users who want to paginate through several page will have to manually scroll back to the bottom after each click of the paginate button. So should we do a UX review of this to decide which interaction is more common and more useful? Also, should we consider moving pagination to top of page ? Or cloning it so it shows at top and bottom of datateble (maybe this is overkill (?)