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.

HTML

<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>

CSS

html {
  box-sizing: border-box;
  scroll-behavior: smooth;
}
.excess-padding {
padding-bottom:800px;
}

Demo

Test the scroll

Im the end

Welcome

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.

❤👩‍💻🕹