Add "scroll-behavior: smooth;" in CSS?

[benjaoming]

There are lots of anchor links that can be easily animated by using:

html {
    scroll-behavior: smooth;
}

It's fairly uncomplicated to add and supported by most browsers: https://caniuse.com/?search=scroll-behavior

[GergelyKalmar]

The instant-jump is much quicker when potentially lots of content need to be jumped through though. It is very important for the navigation in a documentation to be snappy, and I also don't see how smooth scrolling would add value for the user.

[benjaoming]

The instant-jump is much quicker when potentially lots of content need to be jumped through though.

I haven't thought much about that, I just kind of assumed that the browser takes care of that? Or is this a known issue?

If it's really an issue, I think it should be possible to write a CSS rule that changes scroll-behavior on very long pages.

I also don't see how smooth scrolling would add value for the user.

It adds value to the user by letting them observe what's happening. As a navigation click can be mistaken for switching to an entirely new page, I find it helpful to see the movement of the page (up or down) to orient myself.

[GergelyKalmar]

The scrolling will always be slower than the insta-jump, and while it is true that the scroll animation speed is managed by the browser, it can still feel annoyingly slow when one wants to jump quickly between sections (e.g. in a larger class reference). I'm aware that MDN does this (see e.g. https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics and the "In this article" menu), but also notice how it takes an additional second to actually get to a section this way. Some other larger players do this as well (see e.g. Facebook's documentations under https://developers.facebook.com/docs/graph-api/overview), others don't (see e.g. Google Cloud documentation under https://cloud.google.com/python/docs/reference/secretmanager/latest).

The orientation is a fair point, even though you can usually see where you are in a document from the highlighting in the navigation bar. Also keep in mind that some users may be sensitive to the scrolling animation (e.g. people with vestibular disorders, see https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html). You can fix the latter with respecting the reduce-motion media query, still, I'm not sure if the benefits outweigh the downsides in this case (navigation speed being by far my biggest concern).

I don't mind either way, as I can always just override it :).

[benjaoming]

I'm aware that MDN does this (see e.g. https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics and the "In this article" menu)

MDN is a great example of using scroll-behavior to improve UX.

Anecdote: Before this function, I remember using weird negative margins or other tricks to make the offset of the anchored headline just like -50px different so that the user could still see what comes before the headline and not thing that they went to a new page.

I'm sure that browsers can improve this behavior in the future, but the behaviors in Firefox and Chrome are quite good.. can't really tell a difference on my system.

The orientation is a fair point, even though you can usually see where you are in a document from the highlighting in the navigation bar. Also keep in mind that some users may be sensitive to the scrolling animation (e.g. people with vestibular disorders, see https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html).

I could imagine that a CSS rule like this would definitely be forced off on a system for someone who doesn't want it. It's also why it's so nice that it's CSS and not some JS hack.

There is a spec here: https://drafts.csswg.org/css-overflow/#smooth-scrolling

It says:

User agents may ignore this property.

[dylanh724]

How would this help the user?

I have an open StackOverflow question that relates to OP's mention:

The navbar feels so "jumpy". If at least the navbar could have smooth scrolling -- I expect fast anchoring to body content but absolutely do not expect this for the navbar. In fact, I'd prefer the navbar not be auto-moved at all; it just looks so buggy. Also notice that "flash" when you click it that's a bit disorienting:

But adding that smoothing.... fixes everything: