scroll-behaviour: smooth
Another satisfying one-liner - this CSS rule allows your page to scroll smoothly when anchor links are clicked.
You can apply this to any element that has scroll, but is most useful on your html element as the behavior will then be applied to the viewport.
html {
scroll-behavior: smooth;
}<html class="scroll-smooth">Section One
Sed nec dolor vestibulum, maximus odio non, dapibus tortor. Donec sagittis condimentum iaculis. Mauris consectetur hendrerit leo, et aliquet felis dictum vitae. Aenean dui ligula, condimentum eu ornare ac, posuere vel nulla. Praesent commodo maximus nibh at molestie. Pellentesque diam sem, laoreet nec sapien sit amet, tristique porttitor lectus. Nam placerat placerat nisi ac lacinia. Sed sed nulla non justo tempus mollis vitae ac felis. Morbi ultrices leo non lobortis sagittis.
Section Two
Sed nec dolor vestibulum, maximus odio non, dapibus tortor. Donec sagittis condimentum iaculis. Mauris consectetur hendrerit leo, et aliquet felis dictum vitae. Aenean dui ligula, condimentum eu ornare ac, posuere vel nulla. Praesent commodo maximus nibh at molestie. Pellentesque diam sem, laoreet nec sapien sit amet, tristique porttitor lectus. Nam placerat placerat nisi ac lacinia. Sed sed nulla non justo tempus mollis vitae ac felis. Morbi ultrices leo non lobortis sagittis.
Section Three
Sed nec dolor vestibulum, maximus odio non, dapibus tortor. Donec sagittis condimentum iaculis. Mauris consectetur hendrerit leo, et aliquet felis dictum vitae. Aenean dui ligula, condimentum eu ornare ac, posuere vel nulla. Praesent commodo maximus nibh at molestie. Pellentesque diam sem, laoreet nec sapien sit amet, tristique porttitor lectus. Nam placerat placerat nisi ac lacinia. Sed sed nulla non justo tempus mollis vitae ac felis. Morbi ultrices leo non lobortis sagittis.
scroll-behaviour: smooth
Menu