SmoothScroll and the importance of subtle UX

[madebyafox]

I'm in the process of porting Rmd notebooks for my dissertation analyses to quarto (book project, rendering as html).
(Because, this is more fun than writing the dissertation) I digress. I love the authoring experience. But something about the reading experience was really bothering me. Scrolling through and navigating through sections and sub sections and sub sub sections just felt different and I couldn't put my finger on why. So I fired up the Rmd version and rendered to html. The cause was immediately apparent : smooth scroll.

My Rmd yaml includes:
toc_float: collapsed: no smooth_scroll: yes

and those three little lines completely transform the user experience of navigating the lengthy notebook. I cannot find the equivalent option in Quarto, after much searching of the docs and examples

Does smooth scroll exist in Quarto?

If not:
(1) anyone know of a hacky post-rendering workaround I might add to the html file?
(2) can we please please please add smooth scroll the pipeline?

Loving Quarto so far — thank you to the entire team!

[madebyafox]

I persisted... think I found a workaround if anyone is curious :) Can add the following style to a custom css file

html{
scroll-behavior: smooth;
}

then link the css through the yml

format:
html:
css: styles.css

STILL astonishing to me how one line of code and such a simple change completely changes the user experience!

[dragonstyle]

This is great that you discovered this! That should affect cases especially like navigating via the TOC (instead of jumping, quickly scrolling to the section). We don't currently have an option for this, but will give some thought to ensure we have a good default and perhaps an option beyond tweaking the CSS. Thanks for the follow up post!

[jjallaire]

@dragonstyle Definitely second the idea of at a minimum providing an option and even perhaps making this the default. Note that we use this library in the visual editor (which provides a few more options: https://github.com/zengabor/zenscroll)

[dragonstyle]

Ok, we've added support for smooth-scroll here: b44dadf . By default, we've decided to leave smooth scrolling off, but you can easily enable it like so:

format:
  html:
    smooth-scroll: true

There is a fresh release being built now- it should be ready in a few minutes.

[madebyafox]

Y'all are AMAZING! Thanks so much!