scroll-to-text-fragment-scroll-to-center-target.html (721B)
1 <!DOCTYPE html> 2 <title> 3 Ensuring a text directive is scrolled to the center of the view port instead of the top. 4 </title> 5 <script src="stash.js"></script> 6 <script> 7 function checkScroll() { 8 const results = {hasScrolled: window.scrollY != 0}; 9 let key = (new URL(document.location)).searchParams.get("key"); 10 stashResultsThenClose(key, results); 11 }; 12 window.onload = () => { 13 window.requestAnimationFrame(function() { 14 window.requestAnimationFrame(checkScroll); 15 }) 16 } 17 </script> 18 <body> 19 <script> 20 document.addEventListener("DOMContentLoaded", () => { 21 // trigger a layout flush 22 _ = document.body.getBoundingClientRect(); 23 }); 24 </script> 25 <div style="margin-top: 20vh; margin-bottom: 100vh">Scroll to me</div> 26 </body>