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

Question

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?

https://p2mv.studio/case/sony-music-france

Please don't do this beyond setting the scroll-behavior property. It causes your page to violate user expectations of how scrolling works on their device, and doing it in JS tends to be CPU-heavy and glitchy on a lot of browser/device combinations. — Zak, Apr 22 '22 at 20:44

score 7 · Accepted Answer · edited Nov 17 '21 at 15:23

7

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/

edited Nov 17 '21 at 15:23

Brandon McConnell

5,776
1
20
36

answered Apr 02 '19 at 10:43

rodcunha

387
1
16

5

Note that setting behavior in scroll functions is supported by jQuery, not native Javascript. – Oystein Sep 13 '19 at 09:11
3

So... there's only 2 options? Instant and 'smooth' ? – Kalnode Dec 21 '21 at 16:09
2

This does not answer the OPs question about speed and acceleration – John Miller Jan 30 '23 at 14:42

score 1 · Answer 2 · answered Mar 09 '23 at 19:48

You can use CSS to apply scroll-behavior: smooth; to a container for which you would like a smooth scrolling behavior.

You can further manipulate the speed of the scrolling by adding a transition to the children elements within the container. Provided you are manipulating the position of children elements with Javascript, you would simply add a transition such as transition: left 1s;, where left is the CSS property you wish to transition and 1s is the time in seconds.

score 0 · Answer 3 · edited Jul 16 '20 at 23:17

0

You can try this: Nicescroll jQuery Plugin.

This library implements accelerated scrolling. Download and import the scripts, and then add the following:

$("body").niceScroll();

edited Jul 16 '20 at 23:17

Ed Lucas

5,955
4
30
42

answered Jul 16 '20 at 22:26

Michel Escalante Álvarez

149
6

score 0 · Answer 4 · answered May 26 '22 at 17:23

Using jQuery, to scroll from a button (class="to-id") to a heading (id="myID").

<input class="to-id" name="contact_owner" value="Contact" />

<h1 id="myID">


<!-- scroll to ID -->
<script>            
    jQuery(document).ready(function() {
    
        jQuery('.to-id').click(function(event) {
            event.preventDefault();
            $('html, body').animate({scrollTop:$('#myID').position().top}, 1000);
            return false;
        })
    });
</script>

score -4 · Answer 5 · answered Apr 02 '19 at 10:43

You can simply do this using jquery.

The css property is actually causing the delay, so you can adjust the delay with it.

  transition-duration: 500ms;

Reference:

The transition-duration CSS property sets the length of time a transition animation should take to complete. By default, the value is 0s, meaning that no animation will occur.

$(document).on('mousemove', (event) => {
  $('.cursor').css({
    top: event.clientY,
    left: event.clientX,
  });
});

.cursor {
  transition-timing-function: ease-out;
  background-color: red;
  border-radius: 5px;
  height: 10px;
  transition-duration: 500ms;
  transform: translateX(-50%) translateY(-50%);
  position: fixed;
  width: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cursor"></div>

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

5 Answers5

Linked