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

Other Items in css
Page Views

This page has been viewed 72 times.

Search Code
Search Code by entering your search text above.
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.

❤👩‍💻🕹