scroll-initial-target-with-hash-fragment-navigation-inner-frame.html (769B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 </head> 6 7 <body> 8 <style> 9 :root { 10 margin: 0px; 11 } 12 13 #spacer { 14 height: 100vh; 15 width: 100px; 16 } 17 18 #top_box { 19 width: 100px; 20 height: 60vh; 21 background-color: blue; 22 } 23 #middle_box { 24 width: 100px; 25 height: 60vh; 26 scroll-initial-target: nearest; 27 background-color: purple; 28 } 29 #bottom_box { 30 width: 100px; 31 height: 60vh; 32 background-color: yellow; 33 } 34 35 #fragment_target { 36 width: 100px; 37 height: 100px; 38 background-color: red; 39 } 40 </style> 41 <div id="top_box"></div> 42 <div id="middle_box"></div> 43 <div id="bottom_box"></div> 44 <div id="spacer"></div> 45 <div id="fragment_target">Fragment Target</div> 46 </body> 47 48 </html>