How to change scroll behaviour (e.g. speed, acceleration) on a website?

Question

How are the modified scroll behaviours on websites made? I want to accomplish an accelerated scroll behaviour as you can see it in the example. So, you scroll at a certain speed and, after you let go, the page scrolls a little more by its own, slows down, and stops.

Unfortunately, I have absolutely no basis to provide you with code, but I hope you can still help me. Maybe you can recommend me some JavaScript plugins?

Demo

Answer 1

You have 2 ways of achieving this. You can use CSS

html { scroll-behavior: smooth; }

or you can use JavaScript:

// Scroll to specific values
// scrollTo is the same
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth'
});

// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
})

You can read more and find more examples here: https://css-tricks.com/snippets/jquery/smooth-scrolling/