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


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.