# Scrolling to top of the window

**URL:** <https://discourse.nodered.org/t/scrolling-to-top-of-the-window/73677>\
**Category:** Dashboard\
**Created:** [14 January 2023 23:15 UTC](https://discourse.nodered.org/t/scrolling-to-top-of-the-window/73677 "2023-01-14T23:15:41Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![olius](https://avatars.discourse-cdn.com/v4/letter/o/71c47a/32.png) [@olius](https://discourse.nodered.org/u/olius)\
**Post date:** [14 January 2023 23:15 UTC](https://discourse.nodered.org/t/scrolling-to-top-of-the-window/73677/1 "2023-01-14T23:15:41Z")

</div>

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 :

```auto
[
    {
        "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 !

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [15 January 2023 07:44 UTC](https://discourse.nodered.org/t/scrolling-to-top-of-the-window/73677/2 "2023-01-15T07:44:28Z")

</div>

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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/5/25906fe605dcd72b8630ce88049e3baa3b73a87a.png)

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

and let me know if it works

```auto
[{"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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/6/a6cf33576432232e24fb10e7d1fd533c1024a430.png)

---

<div class="post-metadata">

**Author:** ![olius](https://avatars.discourse-cdn.com/v4/letter/o/71c47a/32.png) [@olius](https://discourse.nodered.org/u/olius)\
**Post date:** [15 January 2023 22:50 UTC](https://discourse.nodered.org/t/scrolling-to-top-of-the-window/73677/3 "2023-01-15T22:50:17Z")

</div>

> [@smanjunath211](#):
>
> ```auto
> [{"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"]]}]
> 
> ```

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!

---

<div class="post-metadata">

**Author:** ![smanjunath211](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/smanjunath211/32/95742_2.png) [@smanjunath211](https://discourse.nodered.org/u/smanjunath211)\
**Post date:** [16 January 2023 00:45 UTC](https://discourse.nodered.org/t/scrolling-to-top-of-the-window/73677/4 "2023-01-16T00:45:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [30 January 2023 00:46 UTC](https://discourse.nodered.org/t/scrolling-to-top-of-the-window/73677/5 "2023-01-30T00:46:14Z")

</div>

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