Scroll instantly to the top when smooth is set with CSS

Question

I have a webpage with the following set:

html {
    scroll-behavior: smooth;
}

However, I have a case where I have to scroll to the top without any smoothing. According to the Mozilla docs I could use the behavior: 'auto' option.

https://developer.mozilla.org/en-US/docs/Web/API/ScrollToOptions/behavior

But it wouldn't be the web if it wasn't broken. When I use the following:

window.scrollTo({ top: 0, behavior: 'auto' });

I still get an animated scroll.

How can I (easily) get instant scrolling?

Answer 1

This is because you have set the css property scroll-behavior to smooth.

The window.scrollTo behavior option doens't override the css value.

---

Replace

window.scrollTo({ top: 0, behavior: 'auto' });

With

document.documentElement.style = "scroll-behavior: auto";
document.documentElement.scrollTo({ top: 0, behavior: 'auto' }); // or just leave it window.scrollTo(...), doens't matter. I just like it this way ;)

 let button = document.getElementById("test"); button.addEventListener('click', () => { // Reset the CSS scroll-behavior property document.documentElement.style = "scroll-behavior: auto"; document.documentElement.scrollTo({ top: 0, behavior: 'auto' }); // or just leave it window.scrollTo(...), doens't matter // Do more stuff here, like setting the 'scroll-behavior' back to smooth ..... });

 html { height: 100000px; scroll-behavior: smooth; } button { position: fixed; }

 <button id="test"> Scroll down then click me </button>

Answer 2

See this, it's not a 100% proper solution but the trick worked:

 document.querySelector('#gototop').addEventListener('click', function(){ document.querySelector('html').classList.add('gototop'); window.scrollTo({top: 0, behavior: 'auto'}) }); var isScrolling; // Tracking scroll end to make the CSS in html as it was. window.addEventListener('scroll', function ( event ) { window.clearTimeout( isScrolling ); isScrolling = setTimeout(function() { document.querySelector('html').classList.remove('gototop'); }, 66); }, false);

 html { scroll-behavior: smooth; } html.gototop { scroll-behavior: auto; }

 <br><div>he behavior property of the ScrollToOptions dictionary specifies whether the scrolling should animate smoothly,<br> or happen instantly in a single jump. <br> This is actually defined on the ScrollOptions dictionary, which is implemented by ScrollToOptions. <br> Syntax behavior: ScrollBehavior Value An enum, the value of which can be one of the following: smooth: The scrolling animates smoothly. auto: The scrolling happens in a single jump. Examples In our scrolltooptions example (see it live)<br> we include a form that allows the user to enter three values — two numbers repr<br>esenting the left and top properties (ie the positions to scroll to alon<br>g the<br> X and Y axes), and a checkbox indicating <br>whether they want smooth scr<br>olling enabled or not. <br> When the form is submitted, an event handler is run that<br> puts the entered values into<br> a ScrollToOptions dictionary, and then invok<br>es the Window.ScrollTo() method, passing the dictionary as a parameter:<br> <br> form.addEventListener('submit', (e) => { e.<br>preventDefault(); var scrollOptions = { left<br>: leftInput.value, top: topInput.value, behavior<br>: scrollInput.checked ? 'smooth' : 'auto'<br> } <br> window.scrollTo(scrollOptions);<br> });<br> Specifications Specification Status Comment<br> CSS Object Model (CSSOM) View Mod<br>ule The definition of 'behavior' in that <br>specification. Working Draft Browser compatibility Update compatibility data on GitHub<br> Desktop Mobile Chrome Edge Firefox Internet Explorer<br> Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet behavior Full support45 No supportNo Ful<br>l supportYes No supportNo Full support3<br>2 No supportNo Full support45 Fu<br>ll support45 Full supportYes Full supp<br>ort32 No supportNo Full supportYes<br> <br> <br> What are we missing? Lege<br>nd Full support <br> Full support<br> No support <br> No support<br> See also ScrollTo<br>Options <br> Metadata Last<br> modified: Mar 18, 2019, by MDN contributors Related Topics ScrollTo<br>Options Properties<br> behavior<br> left top Learn the best of web development</div><br> <button id="gototop" >Go to top</button>

Answer 3

Try to use just {top: 0} object without any "behavior" key. Also take a note, 'behavour' property is not supported in Internet Eplorer, by default it will be instant scroll.