scroll-initial-target-with-anchor-navigation-inner-frame.html (734B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 </head> 6 7 <body> 8 <style> 9 :root, body { 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: red; 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 </style> 35 <div id="top_box"><a id="anchor_target_link" href="#anchor_target">Anchor Link</a></div> 36 <div id="middle_box"></div> 37 <div id="bottom_box"></div> 38 <div id="spacer"></div> 39 <div id="anchor_target">Anchor Target</div> 40 </body> 41 42 </html>