From cee000008614042626e42f4a70418a1e827fcb3b Mon Sep 17 00:00:00 2001 From: Iisakki Rotko Date: Thu, 24 Oct 2024 17:11:33 +0200 Subject: [PATCH] docs: explain how to make scrolling to an anchor smooth (#815) We also start using this on our documentation site. --- solara/server/assets/style.css | 1 + .../advanced/content/20-understanding/40-routing.md | 8 +++++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/solara/server/assets/style.css b/solara/server/assets/style.css index bb5552a8d..4f782e8ab 100644 --- a/solara/server/assets/style.css +++ b/solara/server/assets/style.css @@ -1,6 +1,7 @@ html { /* override vuetify's css reset ress.css */ overflow-y: auto; + scroll-behavior: smooth; } .jupyter-widgets code { diff --git a/solara/website/pages/documentation/advanced/content/20-understanding/40-routing.md b/solara/website/pages/documentation/advanced/content/20-understanding/40-routing.md index 8e868841f..9c3144465 100644 --- a/solara/website/pages/documentation/advanced/content/20-understanding/40-routing.md +++ b/solara/website/pages/documentation/advanced/content/20-understanding/40-routing.md @@ -227,7 +227,13 @@ The `solara.Link` component also supports linking to HTML elements identified by solara.v.Btn(attributes={"id": "my-id"}, ...) ``` -You can then link to a particular element by appending `#` followed by its id to your link, i.e. `solara.Link(route_or_path="/page#my-id")`. +You can then link to a particular element by appending `#` followed by its id to your link, i.e. `solara.Link(route_or_path="/page#my-id")`. If you want the page to smoothly scroll to the linked element, you should give an element that contains it (for instance the `html`-element) the following CSS rule: + +```css +html { + scroll-behaviour: smooth; +} +``` ## Fully manual routing