~ read.

TIL: Smooth Scrolling Windows

Today I Learned

So, I knew this was possible.

I have certainly used smooth scrolling in the past. Maybe I even used a jQuery library or two to do it. Of course, I know it could be done in pure JS ... But I haven't had the opportunity to do it for a while.

It was actually quite easy

Scrolling A Node Into View

const node = document.querySelector(".my-node");  
node.scrollIntoView({  
  behavior: 'smooth' 
});

Scrolling A Page Location

window.scrollTo({top: 150, left: 0, behavior: "smooth"})  

CSS Solutions

There is also a css property that you can set. My small experiments show a small, vague noticeable difference in chrome

html {  
  scroll-behavior: smooth;
}

So, yeah. It was much easier than I had thought.

For More Information

comments powered by Disqus