Better management of the the scroll position of the Lovelace views while navigating in Home Assistant.
Default behaviour | Autoscroll on |
---|---|
![]() |
![]() |
When one navigates from one view to another in Home Assistant, sometimes the new page keeps the same scroll position from the previous page (specially subviews). This plugin changes this behaviour, it allows one to configure which views or subviews will automatically scroll to the top of the page when they are rendered and it also allows one to keep scroll position that a page had when navigating back through the history.
You can install the plugin in two ways, through HACS or Manually:
In the Frontend
section of HACS hit the Explore and download repositories
button in the bottom right of the page.
Search for Autoscroll
and install it.
If using yaml
mode or if HACS
doesn‘t automatically add it, you'll need to add it as a resource. (check Add the plugin as a resource section)
Doanload the latest version of autoscroll
from the releases page and place the autoscroll.js
file under your config/www
folder.
yaml
mode users may add it to their configuration.yaml file. Nonyaml
mode, orstorage
mode users can find resources in their sidebar under"Settings" > "Dashboards" (Click on the three-dots button located on the top right of the page) > "Resources"
resources:
# To avoid the resource being cached, when you upgrade to a new version, update also the version number parameter at the end of the url
- url: /hacsfiles/autoscroll/autoscroll.js?v=1.0.0
type: module
You can place the configuration in multiple places, mainly in URL parameters or in the yaml
configuration of the dashboard.
URL parameter |
Description |
---|---|
?autoscroll=smooth |
Scrolls to the top of the view/subview with smooth behaviour when navigating to it |
?autoscroll=instant |
Scrolls to the top of the view/subview with instant behaviour when navigating to it |
?autoscroll=disabled |
Disables automatic scrolling overriding any configuration placed in the yaml configuration |
&history_keep_scroll |
If autoscroll is not disabled , it keeps the previous scroll of a page when navigating back to it through the history |
yaml
You can place the configuration in the whole dashboard (all the views in that dashboard will have automatic scrolling), or in a specific view/subview (only that view/subview will have automatic scrolling).
For
yaml
mode users, just go to theyaml
dashboard file in which you want to add the configuration. For nonyaml
mode users (a.k.a.storage
mode), go to the specific dashboard, click on the three-dots button located on the top-right of the header, selectEdit dashboard
, click again on the three dots button, and selectRaw configuration editor
.
You need to place the configuration at the begining of the yaml
file:
autoscroll: ## <--- here
behavior: smooth
history_keep_scroll: true
title: Dashboard title
views:
...
Search in the yaml
file the section respective to the view/subview (you can recognise the view for its title or its path). Place the configuration in the root of the view (before the cards
)
title: Dashboard title
views:
...
- theme: theme of the view
title: title of the view
path: path of the view
badges: []
autoscroll: ## <--- here
behavior: smooth
history_keep_scroll: true
cards:
...
Config |
Description |
---|---|
behavior: smooth |
Scrolls to the top of the view/subview with smooth behaviour when navigating to it |
behavior: instant |
Scrolls to the top of the view/subview with instant behaviour when navigating to it |
behavior: disabled |
Avoids automatic scrolling overriding any configuration placed in the dashboard configuration |
history_keep_scroll |
If the behavior is not disabled and this parameter is true , it keeps the previous scroll of a page when navigating back to it through the history |