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

Jaclin

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. – Bawd

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/

Quittor

Note that setting behavior in scroll functions is supported by jQuery, not native Javascript. – Rid

So... there's only 2 options? Instant and 'smooth' ? – Demarcation

This does not answer the OPs question about speed and acceleration – Berthaberthe

Answer 2

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.

Burnish

Can you give a specific cod eexample for a standard up down scroll? I am looking for a way to have a speed in between the normal and the smooth.. – Poppas

Answer 3

You can try this: Nicescroll jQuery Plugin.

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

$("body").niceScroll();

Lineup

Answer 4

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>

Useful

Answer 5

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>

Ubana