I have a web part with a UI larger than the screen size of a large viewport (1400 X 690px). When users scroll down to see the content toward the bottom of the screen and click a button to see a detail screen, they only see the bottom of the screen and have to scroll up to see the top of the content. I would like to scroll to the top of the web part whenever users click the button to see the details screen. However, all of the usual methods such as scrollIntoView or scrollTo don't seem to work. Instead I've had to implement a crude and disruptive solution which is to reload the page. This would seem to be a fairly simple issue, but I've spent many hours trying to implement it without success.
Here is a typical example of the code I've tried to use for the above purpose:
var details = document.getElementById("#details"); details.scrollIntoView();
details is a div tag at the top of the web part.
This seems like a common use case, but it's possible that I'm overlooking some obvious reason why it can't work. Any guidance is appreciated.