Can I change CSS scroll-behavior from JavaScript?

Question

I am trying to have my page snap to the top when the page is reloaded. To do this I am using JavaScript like so:

window.onbeforeunload = function() {
   window.scrollTo(0,0);
}

This was working great for me until I turned on smooth scrolling in my CSS:

scroll-behavior: smooth;

And now it won't work at all.

What I'd like to be able to do is temporarily turn off the CSS smooth scrolling behavior from JS something like this:

window.onbeforeunload = function() {
   document.getElementsByTagName("HTML")[0].style.scrollBehavior = "auto";
   window.scrollTo(0,0);
}

However it looks like style.scrollBehavior isn't valid and I can't find anything that is. Is it possible to change this from JavaScript?

If not is there a way to turn smooth scrolling on and off from within JavaScript that is fairly simple?

I just would like to keep things pretty straight forward if possible.

jeprubio · Accepted Answer · 2020-03-19 20:25:03Z

5

You can use scrollIntoView with an html element passing smooth as the behaviour, as in:

element.scrollIntoView({ block: 'start',  behavior: 'smooth' });

answered Mar 19, 2020 at 20:07

jeprubio

18.1k5 gold badges51 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1