Run ❯
Get your
own
website
×
Change Orientation
Save Code
Change Theme, Dark/Light
Go to Spaces
<!DOCTYPE html> <html> <head> <style> html { scroll-behavior: smooth; } #section1 { height: 600px; background-color: pink; } #section2 { height: 600px; background-color: yellow; } </style> </head> <body> <h1>Smooth Scroll</h1> <div class="main" id="section1"> <h2>Section 1</h2> <p>Click on the link to see the "smooth" scrolling effect.</p> <a href="#section2">Click Me to Smooth Scroll to Section 2 Below</a> <p>Note: Remove the scroll-behavior property to remove smooth scrolling.</p> </div> <div class="main" id="section2"> <h2>Section 2</h2> <a href="#section1">Click Me to Smooth Scroll to Section 1 Above</a> </div> <p><strong>Note:</strong> The scroll-behavior property is not supported in Internet Explorer.</p> </body> <!-- Mirrored from www.w3schools.com/cssref/tryit.php?filename=trycss_scroll_behavior by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 21 Dec 2022 17:38:12 GMT --> </html>
