Add settings to additionally focus on a new appearing element

I agree that scrolling to top, when clicking "Load more" is also bad UX for regular users and should at least be configurable.

Are there any good reasons for automatically scrolling to top, when clicking load more? If yes, there should be an option to select what should happen:

• Do not scroll
• Scroll to the top of the view
• Scroll to the new items

Any other ideas? Or just remove that auto-scrolling (I think it's from AJAX in views) entirely?

Settings priority to major as this is unexpected and really bad a11y and UX currently.

Similar issue for Drupal 7: #2700287: Internet Explorer jumps to the top of the page. →

With the patch applied, it now focuses contents randomly in the middle, not at the start of the content. Switching to an issue branch workflow, to work on this issue.

Alright, we just looked into this and I think we have to dig deeper for this. The scrollTop Implementation comes from core's "ViewAjaxController" in line 188:

$response->addCommand(new ScrollTopCommand(".js-view-dom-id-$dom_id"));

The first step would be trying to remove this command from the response before it gets executed. This might be possible inside the "InfiniteScroll" pager or we need to use a hook.

The next step would be to create a new "scrollBehavior" setting for the "Load more" button with the following options:

• Scroll to top
• Don't scroll at all
• Focus new element

Or something along those lines, naming wise (We might not need the "Scroll to top" option). For the "Focus new element" functionality, we might have to create a new "ScrollToCommand" Ajax command, OR the "ScrollTopCommand" might be enough when passing the newly added element's selector!

Alright, this was actually quite a simple change! We already had a ResponseSubscriber service, which tries to delete the "scrollTop" command!! Unfortunately, it tried to delete an undefined "viewsScrollTop" command, instead of the now called "scrollTop" command. This name seems to got changed on some release!!

Setting this to "Needs work" so we can implement the settings part.

"Fix command name" would have been more appropriate, oh well, the commits will get merged anyways.

I just discussed with @Anybody, that we should definitely split this issue. I'll work on the settings implementation here and create a second issue, where we only fix the scrolling issue.

See 📌 Do not scroll to top, when loading more elements in view Fixed .

Ok, this should work now, but it doesn't.

Eventually, the Ajax Scroll command is executed, before the new content appears after pressing the "Load More" button. This could be a big problem. Maybe only the selector used is not perfect, I don't know.

Ok, this isn't easily executed. The main problem is, that there seems to be no proper way to identify the newly added items. The current MR tries to scroll to the last child of the view (Although the current MR uses the wrong selector and the AjaxCommand needs to be prepended via the $response object), but this only works, if we add one element for each load. If there are multiple items added on each load, we always want to scroll to the first new item. This currently isn't solvable, as the newly added items are not easily identifiable.

I am setting this to POSTPONED for now. If anyone would like to try fixing this, they can go ahead!

Also, a "scroll_top" option without unsetting the Ajax Command could also be a possibility.