Section Anchors (Jump to)

[oerix]

What type of request is this?

Enhancement to existing card/feature

Existing card or feature name

{"View" => "Sections"}

Describe the enhancement

We really need a way to 'jump to section' feature, where you can easily navigate to certain part of view sections. This can be easily implemented inside the section editor, which will allow you to define a simple '#name` anchor.

A good example of this is bubble-card popups, you can easily trigger popups to open and close simple by using anchors with tap_actions.

Using input_booleans or other helpers for a simple task like this, is not the answer.

Use cases

You'll be able jump to any section of the page effortlessly, instead of having to scroll endlessly to get to the section you want.

• Navigate 'jump to' sections.
• Entity based Open/Close buttons.
• Many more...

Visual examples

Bubble-Card: https://github.com/Clooos/Bubble-Card?tab=readme-ov-file#pop-up
Anchor card: https://community.home-assistant.io/t/anchor-card-scroll-anywhere/612879

Anything else?

There's a clear demand for it, see here:
https://community.home-assistant.io/t/wth-are-there-no-anchors-to-link-to-specific-parts-of-a-dashboard-view/470947/16
https://community.home-assistant.io/t/anchor-element-for-lovelace-to-enable-links-to-specific-parts-of-scrollable-lovelace-dashboard/362445
https://community.home-assistant.io/t/navigate-to-a-specific-section-without-scrolling/779869
https://community.home-assistant.io/t/navigate-to-anchor-of-lovelace-card/250715

[CloCkWeRX]

Not quite what you are looking for, but you can also target any specific text on a page with plain old HTML links:
http://home-assistant.local:8123/dashboard-areas/areas-kitchen#:~:text=New%20section
... and your browser will navigate to that subsection of the page; highlighting text.

How could this be built?

Implementing this; if the //div[@class="section"] element output an ID that was stable, or allowed users to specify it would allow the browser to do 99.99% of it. Adding a CSS transition via scroll-behavior: smooth; would remove what many have done with adding JS to control scrolling behaviour.

Other research:
home-assistant/frontend#12782 - some discussion of material web components and accessibility
https://github.com/home-assistant/frontend/blob/28ed5c86c7a486d04915b59293ae44b0db6eb308/src/components/ha-section-title.ts#L4 - ha-section-title, the heading part of section cards which could support ids for deep links.
https://github.com/home-assistant/frontend/blob/28ed5c86c7a486d04915b59293ae44b0db6eb308/src/components/ha-card.ts#L70 - similar for a general ha-card
https://github.com/home-assistant/frontend/blob/28ed5c86c7a486d04915b59293ae44b0db6eb308/src/panels/lovelace/sections/hui-section.ts#L36 - general section element