Add JavaScript auto scroll when opening the value block

This commit is contained in:
2025-07-24 11:31:27 -04:00
parent 67495b5064
commit 1b5626b477
2 changed files with 11 additions and 1 deletions

8
app.js Normal file
View File

@@ -0,0 +1,8 @@
const valueBlock = document.getElementById("value-expanded");
document.querySelector('.value-block').addEventListener('toggle', function() {
if (this.open) {
// Code to execute when the details are opened
valueBlock.scrollIntoView({ behavior: "smooth" });
}
});

View File

@@ -47,7 +47,7 @@
<a class="button button-metagamerscore" href="https://metagamerscore.com/profile/25193" rel="noopener" role="button" itemprop="sameAs"><img class="icon" aria-hidden="true" src="images/icons/generic-game-controller.svg" alt="">MetaGamerScore</a> <a class="button button-metagamerscore" href="https://metagamerscore.com/profile/25193" rel="noopener" role="button" itemprop="sameAs"><img class="icon" aria-hidden="true" src="images/icons/generic-game-controller.svg" alt="">MetaGamerScore</a>
<details class="value-block"> <details class="value-block">
<summary> <summary id="value-expanded">
<!-- Value for Value --> <!-- Value for Value -->
<span class="button button-v4v" role="button"><img class="icon" aria-hidden="true" src="images/icons/generic-bolt-icon.svg" alt="">Value for Value</a> <span class="button button-v4v" role="button"><img class="icon" aria-hidden="true" src="images/icons/generic-bolt-icon.svg" alt="">Value for Value</a>
</summary> </summary>
@@ -76,6 +76,8 @@
</div> </div>
</div> </div>
<script src="app.js"></script>
</body> </body>
</html> </html>