How are the modified scroll behaviors on websites made? I want to accomplish an accelerated scroll behavior as you can see it in the example. So you scroll in 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, I hope you can still help me. Maybe you can recommend me some js plugins?
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/
Hope it helps.