using scroll-behavior: smooth css

This is a nice example of smooth scroll using just css.

You can add it to the page by adding it to the html element

html { scroll-behavior: smooth; }

for this demo I will add some padding to the elements so you can see the smooth scroll in action, if your browser supports it.


<p><a href='#somewhere-at-the-end' class='btn btn-primary'>Test the scroll</a></p>
<div class='excess-padding'></div>
<h3 id='somewhere-at-the-end'>Im the end</h3>


html {
  box-sizing: border-box;
  scroll-behavior: smooth;
.excess-padding {

Test the scroll

Im the end

Other Items in css

No Items Found.

Add Comment
Type in a Nick Name here
Page Views

This page has been viewed 603 times.

Search Code
Search Code by entering your search text above.

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.


Random Quote
Treasure every moment that you have and treasure it more because you shared it with someone special, special enough to spend your time...and remember that time waits for no one.