Scrolling to top of the window

Dashboard
1

Hello,

I'm trying to get the client web browser to scroll to the top of the screen whenever I switch tabs using my dashboard.

I've tried wiring an ui_control node to an ui_template node with javascript code in it to do so, as follows :

[
    {
        "id": "a019318ae7b010fb",
        "type": "ui_template",
        "z": "4f586e426698d29e",
        "group": "0f6b52040957d536",
        "name": "Scroll top",
        "order": 30,
        "width": 0,
        "height": 0,
        "format": "<html>\n<body>\n    <script>\n    (function(scope) {\n    // $watch fires each time the node is triggered in the flow\n    scope.$watch('msg', function(msg) {\n            window.scrollTo(0,0);\n            document.body.scrollTop = document.documentElement.scrollTop = 0;\n            window.scrollTop(0);\n        });\n    })(scope);\n    </script>\n</body>\n</html>",
        "storeOutMessages": false,
        "fwdInMessages": false,
        "resendOnRefresh": false,
        "templateScope": "local",
        "className": "",
        "x": 420,
        "y": 800,
        "wires": [
            []
        ]
    },
    {
        "id": "d81424dca2bec936",
        "type": "ui_ui_control",
        "z": "4f586e426698d29e",
        "name": "",
        "events": "all",
        "x": 260,
        "y": 800,
        "wires": [
            [
                "a019318ae7b010fb",
                "f1d057390698d082"
            ]
        ]
    },
    {
        "id": "0f6b52040957d536",
        "type": "ui_group",
        "name": "Domoterre",
        "tab": "f1e2ad2b41fe03c5",
        "order": 1,
        "disp": false,
        "width": 6,
        "collapse": false,
        "className": "<style> body {background-image: url(\"/img/Face-normal.png\");}</style>"
    },
    {
        "id": "f1e2ad2b41fe03c5",
        "type": "ui_tab",
        "name": "Accueil",
        "icon": "home",
        "order": 1,
        "disabled": false,
        "hidden": true
    }
]

But it doesn't work...

Any clue what I might be doing wrong? Could it be an issue of the web page not being fully loaded when the script is executed, hence not working properly?

Thanks a lot !

2

Welcome to the community.

I get to the top of the screen by default when i change the tabs from within the dashboard,
I actually for a reason wanted it to go to a bottom of the screen and used FOCUS=true statement in the change node for the dashboard group that is at the bottom of the screen

image

please change the Tab Name and Group Name as per your dashboard

and let me know if it works

[{"id":"9c4b4f1d36dfca31","type":"change","z":"281cdefb6b284529","name":"SHOW","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"group\":{\"hide\":[],\"show\":[\"TAB_NAME_GROUP_NAME\"],\"focus\":true}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":480,"y":560,"wires":[["24f877a846b7cc15"]]},{"id":"001ac872adfa7dc1","type":"switch","z":"281cdefb6b284529","name":"","property":"name","propertyType":"msg","rules":[{"t":"eq","v":"TAB NAME","vt":"str"}],"checkall":"true","repair":false,"outputs":1,"x":330,"y":560,"wires":[["9c4b4f1d36dfca31"]]},{"id":"24f877a846b7cc15","type":"ui_ui_control","z":"281cdefb6b284529","name":"","events":"all","x":640,"y":560,"wires":[[]]},{"id":"11fc49e7c4a58ead","type":"ui_ui_control","z":"281cdefb6b284529","name":"","events":"all","x":180,"y":560,"wires":[["001ac872adfa7dc1"]]}]

EDIT:

this is available in the help section of ui_control node

image

1 Like
3

Hi Smanjunath211,

Thanks a lot for your fast and efficient answer, it worked perfectly well!

I need to adapt it a little bit though as I want this behavior on all my tabs, but I should be able to do that based on the msg.tab sent by the ui_control node.

Cheers!

1 Like
4

Glad it helped. Please mark the topic as solved if you are satisfied.

1 Like
5

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.