Skip to content

Commit

Permalink
docs: explain how to make scrolling to an anchor smooth
Browse files Browse the repository at this point in the history
We also start using this on our documentation site.
  • Loading branch information
iisakkirotko committed Oct 14, 2024
1 parent 63b998e commit 606f0c0
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 1 deletion.
1 change: 1 addition & 0 deletions solara/server/assets/style.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
html {
/* override vuetify's css reset ress.css */
overflow-y: auto;
scroll-behavior: smooth;
}

.jupyter-widgets code {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down

0 comments on commit 606f0c0

Please sign in to comment.