Answers

• allan Posts: 65,339Questions: 1Answers: 10,838 Site admin

  November 7

  Can you link to a page showing the issue please? It shouldn't be jumping the page scrolling around when clicking a paging button. Regarding focus, the browser's activeElement should remain the paging button, and not shift to a header cell on page change.

  Allan
• silkspin Posts: 158Questions: 36Answers: 5

  November 7

  Thanks @allan for clarifying what should happen after clicking a paging button. I think it's because I'm used to clicking bottom paging on lots of forums etc that start at the top again. I suppose it's a subjective thing.

  As for the scrolling problem, I wasn't sure if it's just with me or a wider problem. ChatGPT told me "This happens because DataTables 2 (with Bootstrap 5 integration) automatically focuses the first cell in the new page after draw, which causes the browser to scroll it into view.", and then offered me code fixes that didn't work! That obviously isn't the case.

  I'll work on a stripped back version this weekend. The problem might be something I did in DT1 or the earlier Bootstrap that is causing the problem.
• allan Posts: 65,339Questions: 1Answers: 10,838 Site admin

  November 7

  Yes, ChatGPT is just plain wrong there, which can be seen in this example if you change it to use Bootstrap 5 theming (menu in the top right) and then using the paging buttons.

  Regarding skip to the top - use this plugin if you want that behaviour.

  Allan
• allan Posts: 65,339Questions: 1Answers: 10,838 Site admin

  November 12 Answer ✓

  That's and odd one! I've not encountered that before... It appears to be coming from this CSS in Bootstrap 5:

  @media (prefers-reduced-motion: no-preference) {
      :root {
          scroll-behavior: smooth;
      }
  }
  

  Override that and it works as expected.

  I think the focus being applied to the paging button is causing Chrome to scroll, and that setting in Bootstrap 5 makes it do it with a little animation.

  Allan
• silkspin Posts: 158Questions: 36Answers: 5

  November 12

  Thanks @allan. I've fixed it by using your suggestion, and overriding the CSS with...

  @media (prefers-reduced-motion: no-preference) {
      :root {
          scroll-behavior: auto;
      }
  }