'Javascript scrollIntoView() doesn't place <details> at top of page

I use the HTML details/summary on my page:

<details id="_1" onclick="closeDetails('_1')">
            <summary>Title 1</summary>
            ...content...
</details>
<details id="_2" onclick="closeDetails('_2')">
            <summary>Title 2</summary>
            ...content...
</details>

I have this Javascript to close the previously opened detail and to place the newly opened detail at the top of the screen:

function closeDetails(y) {
for (i=1; i<31; i++) {
        x = "_"+i;
        if (y != x){ document.getElementById(x).open = false;}
        document.getElementById(y).scrollIntoView();
        }
}

This works except that the Titles within the details tag appear just off the top of the screen. Is there a solution?

javascripthtml


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions