Online Html Editor

<html> <head> <style> nav { background-color: rgb(67, 238, 45); padding: 5px; text-align: center; width: 300px; } nav a { margin:5px; text-decoration: none; } .scroll-behavior-auto { background-color: #F1EFB0; height: 150px; overflow: auto; scroll-behavior: smooth; text-align: center; width: 300px; padding: 5px; } .scrolling-section { display: flex; align-items: center; justify-content: center; height: 100%; } </style> </head> <body> <h1>Scroll behavior Property</h1> <p>Clicking on each sections in nav bar makes smooth scrolling</p> <nav> <a href="#section1">Topic 1</a> <a href="#section2">Topic 2</a> <a href="#section3">Topic 3</a> </nav> <div class="scroll-behavior-auto"> <div class="scrolling-section" id="section1">Topic 1</div> <div class="scrolling-section" id="section2">Topic 2</div> <div class="scrolling-section" id="section3">Topic 3</div> </div> </body> </html>