HTML Editor
<!DOCTYPE html> <html lang="en-US"> <head> <style> a{ margin: 10px; } p{ line-height: 3; font-size: 45px; text-align: center; } div{ height:150px; width: 150px; border: 1px solid black; overflow-y: scroll; } #myAuto{ scroll-behavior: auto; } #mySmooth{ scroll-behavior: smooth; } </style> </head> <body> <h1>CSS scroll-behavior Property</h1> <h2>scroll-behavior: auto;</h2> <a href="#my1">1</a><a href="#my2">2</a><a href="#my3">3</a> <div id="myAuto"> <p id="my1">1</p> <p id="my2">2</p> <p id="my3">3</p> </div> <h2>scroll-behavior: smooth;</h2> <a href="#myA">A</a><a href="#myB">B</a><a href="#myC">C</a> <div id="mySmooth"> <p id="myA">A</p> <p id="myB">B</p> <p id="myC">C</p> </div> </body> </html>
OUTPUT
×

Save as Private