I was recently making a vertical accordion style component and had to have this interaction pattern:

  1. User is presented with a list of clickable items
  2. User clicks an item
  3. Expand the children of the selected item
  4. Scroll the page/container so that the selected item comes at the top of the page

This had to be done so that in case the children expand outside the visible area, then the user does not get confused that nothing opened at all.

I only knew originally of element.scrollTo method, but Prasad Nagthane on StackOverflow pointed me to element.scrollIntoView()

const element = document.getElementById('elementToShowAtTop');
element.scrollIntoView();

This gives me the benefit that I don't have to keep track of which element is the scroll container. If we want to use the scrollTo method then we need to apply it to the scroll container rather than the actual element which we want to show.

Another advantage is that scrollIntoView gives much more control on how and where to position the element within the scroll container. You can choose to align it with the top or the bottom or a couple of other options. Do look into its documentation.