Anchor Card: Scroll anywhere

Share your Projects! Dashboards & Frontend
1

Anchor Card

yo! I’ve made my first HA card, this one is more of a utility so you can organize your dashboards.

what does it do

this card places anchors on your dashboard so you can use URL params to navigate to specific spots, like /lovelace/kitchen?anchor=lights. Tried my best to make it customizable, all info in the repo:

12 Likes
2

I think I’ve missed something. I can get this to work with dashboards, but not with views - for example, this works:

    tap_action:
      action: navigate
      navigation_path: /lovelace?anchor=study

…but this doesn’t:

    tap_action:
      action: navigate
      navigation_path: /lovelace/test?anchor=study

/lovelace is my default dashboard - haven’t tried it with any others yet.

Edit: Should have said, the button I’m navigating from is in /lovelace/test, so it’s navigating to an anchor in the same view.

3

Oh, I see. This is a limitation I haven’t thought of, sorry! The current implementation only checks if it should scroll based on the visibility of its parent. It’ll scroll when it first goes into view. Basically I got JavaScript’d and this was the best solution (AFAIK). But this means that navigating within the same view is not possible. I will try to fix this in the upcoming days, appreciate the feedback.

1 Like
4

Rewrote the logic, it should be possible to scroll within the same page now! Also the card is no longer dependent on the parent.

nerd explanation: I was able to intercept the history.pushState and history.replaceState methods to call a custom event for location change detection. Home Assistant uses these for navigation. Before, I was only trying to listen to the popstate event, which doesn’t get called this way.

3 Likes
5

Hi, thanks for making this. A bit off topic, but what are you using for these room cards in your example gif?

image

6

Please can we fix the spacing issue with this card?

You know what would be awesome, is the ability to add this to any card, rather than it being its own card.

The ability to specify an option within any card to create an anchor point.

Something like

type: custom:mushroom-title-card
title: 'Main House'
alignment: center
subtitle: '- House -'
**anchor: house**
7

These are my own cards. if you’re interested, I could make them public, but there’s like a thousand other room cards on HACS, so it felt like it’d just be clutter