Skip to content
Advertisement

Create a nice scrolling/sliding effect with JS

I would like to create a “smooth” scroll animation that slides down from one element to the next. I do not want to use Jquery or any libraries, just javascript and HTML. I have tried:

element.scrollIntoView();

This causes scrolling, but not a smooth animation. I have already looked at some other smooth-scrolling techniques, but they use Jquery. I would also like to add that the scrolling should be from ELEMENT on a page to another ELEMENT on the page. Scroll down only. Also only javascript function like function scrollFromHere(from, to).

Advertisement

Answer

I know this is an old answer, but for anyone looking for a solution in “modern times”, scrollIntoView supports the behavior parameter:

element.scrollIntoView({ 
  behavior: 'smooth' 
});

Support for behavior: "smooth" is Chrome 61, Edge 79, Firefox 36, Safari 15.4. So Safari is the only real issue for support, assuming you want to support more than just the latest major of Safari (as of 2022).

User contributions licensed under: CC BY-SA
3 People found this is helpful
Advertisement