# Phoenix LiveView Hooks: window scroll issues

**URL:** <https://forum.elixirforum.com/t/phoenix-liveview-hooks-window-scroll-issues/32289>\
**Category:** Questions\
**Tags:** phoenix, liveview, hooks\
**Created:** [June 11, 2020, 4:57pm UTC](https://forum.elixirforum.com/t/phoenix-liveview-hooks-window-scroll-issues/32289 "2020-06-11T16:57:13Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Bumppoman](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/bumppoman/32/19655_2.png) [@Bumppoman](https://forum.elixirforum.com/u/Bumppoman)\
**Post date:** [June 11, 2020, 4:57pm UTC](https://forum.elixirforum.com/t/phoenix-liveview-hooks-window-scroll-issues/32289/1 "2020-06-11T16:57:13Z")

</div>

I have a LiveView form where an error message is displayed along with the form if the form was invalid. Pretty standard stuff. I am trying to implement a hook on this element to scroll to the top of the page when it is mounted. The hook is being called, it just won’t scroll the page. Is this a limitation? I’ve tried both `this.el.scrollIntoView` as well as `window.scrollTo(0, 0)`. Neither moves the page at all.

---

<div class="post-metadata">

**Author:** ![sfusato](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sfusato/32/11569_2.png) [@sfusato](https://forum.elixirforum.com/u/sfusato)\
**Post date:** [June 11, 2020, 5:45pm UTC](https://forum.elixirforum.com/t/phoenix-liveview-hooks-window-scroll-issues/32289/2 "2020-06-11T17:45:42Z")

</div>

I just tried your code on a DOM element that appears conditionally and the window is scrolled to the top:

```elixir
def mounted() { window.scrollTo(0, 0); }

```

Can you share more code?

---

<div class="post-metadata">

**Author:** ![Bumppoman](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/bumppoman/32/19655_2.png) [@Bumppoman](https://forum.elixirforum.com/u/Bumppoman)\
**Post date:** [June 11, 2020, 6:40pm UTC](https://forum.elixirforum.com/t/phoenix-liveview-hooks-window-scroll-issues/32289/3 "2020-06-11T18:40:56Z")

</div>

Sure.

The element is:

```elixir
      <%= if @changeset.action do %>
        <div
          id="complaint-form-errors"
          class="alert alert-danger"
          phx-hook="formScrollToError">There was a problem saving this complaint!</div>
      <% end %>

```

And the `formScrollToError` hook is:

```elixir
export const formScrollToError = {
  mounted () {
    window.scrollTo(0, 0);
  }
} as Hook;

```

---

<div class="post-metadata">

**Author:** ![outlog](https://forum.elixirforum.com/letter_avatar_proxy/v4/letter/o/c0e974/32.png) [@outlog](https://forum.elixirforum.com/u/outlog)\
**Post date:** [June 11, 2020, 6:48pm UTC](https://forum.elixirforum.com/t/phoenix-liveview-hooks-window-scroll-issues/32289/4 "2020-06-11T18:48:09Z")

</div>

> [@Bumppoman](#):
>
> ```elixir
> export const formScrollToError = {
> mounted () {
> window.scrollTo(0, 0);
> }
> } as Hook;
> 
> ```

this looks fishy.. can you make it look like:

> **[Phoenix.LiveView — Phoenix LiveView v1.2.5](https://phoenix-live-view.hexdocs.pm/Phoenix.LiveView.html)**

eg:

```elixir
let Hooks = {}
Hooks.PhoneNumber = {
  mounted() {
    this.el.addEventListener("input", e => {
      let match = this.el.value.replace(/\D/g, "").match(/^(\d{3})(\d{3})(\d{4})$/)
      if(match) {
        this.el.value = `${match[1]}-${match[2]}-${match[3]}`
      }
    })
  }
}

let liveSocket = new LiveSocket("/live", Socket, {hooks: Hooks, ...})

```

---

<div class="post-metadata">

**Author:** ![Bumppoman](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/bumppoman/32/19655_2.png) [@Bumppoman](https://forum.elixirforum.com/u/Bumppoman)\
**Post date:** [June 11, 2020, 7:00pm UTC](https://forum.elixirforum.com/t/phoenix-liveview-hooks-window-scroll-issues/32289/5 "2020-06-11T19:00:25Z")

</div>

I have a separate hooks script that imports all of the hooks and adds them.

The hook is definitely being called…if I change the content to `alert("TESTING")` the alert appears when I would expect it to. It just won’t scroll the window for whatever reason.

---

<div class="post-metadata">

**Author:** ![sfusato](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/sfusato/32/11569_2.png) [@sfusato](https://forum.elixirforum.com/u/sfusato)\
**Post date:** [June 11, 2020, 7:14pm UTC](https://forum.elixirforum.com/t/phoenix-liveview-hooks-window-scroll-issues/32289/6 "2020-06-11T19:14:20Z")

</div>

If you open the browser’s dev console and manually run the command what happens?

Another idea: try calling it with a timeout and see if it makes a difference: `setTimeout(() => { window.scrollTo(0,0) }, 1000)`

---

<div class="post-metadata">

**Author:** ![Bumppoman](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/bumppoman/32/19655_2.png) [@Bumppoman](https://forum.elixirforum.com/u/Bumppoman)\
**Post date:** [June 11, 2020, 7:20pm UTC](https://forum.elixirforum.com/t/phoenix-liveview-hooks-window-scroll-issues/32289/7 "2020-06-11T19:20:31Z")

</div>

That was a good thought! The timeout works. Strangely, it also works using setTimeout if the time is 0. I wasn’t going to be happy with a delay but as long as I can set the timeout to 0, it’s just a curiosity why it won’t work directly.

I appreciate the help.