diff --git a/assets/js/app.js b/assets/js/app.js
index 5437a9c5..b0742f3e 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -40,6 +40,9 @@ window.addEventListener("music_library:clipcopy", (event) => {
alert("Sorry, your browser does not support clipboard copy.");
}
});
+window.addEventListener("music_library:scroll_top", (event) => {
+ window.scrollTo(0, 0);
+});
// connect if there are any LiveViews on the page
liveSocket.connect()
diff --git a/lib/music_library_web/components/layouts/root.html.heex b/lib/music_library_web/components/layouts/root.html.heex
index b8bc9c41..47a2d1d8 100644
--- a/lib/music_library_web/components/layouts/root.html.heex
+++ b/lib/music_library_web/components/layouts/root.html.heex
@@ -1,5 +1,5 @@
-
+
diff --git a/lib/music_library_web/components/pagination.ex b/lib/music_library_web/components/pagination.ex
index 13fd95e7..dad6e9b4 100644
--- a/lib/music_library_web/components/pagination.ex
+++ b/lib/music_library_web/components/pagination.ex
@@ -1,8 +1,9 @@
defmodule MusicLibraryWeb.Pagination do
use Phoenix.Component
-
use Gettext, backend: MusicLibraryWeb.Gettext
+ alias Phoenix.LiveView.JS
+
attr :pagination_params, :map, required: true
attr :id, :atom, required: true
@@ -107,6 +108,7 @@ defmodule MusicLibraryWeb.Pagination do
"relative inline-flex items-center rounded-r-md px-2 py-2",
"text-zinc-400 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-50 focus:z-20 focus:outline-offset-0"
]}
+ phx-click={JS.dispatch("music_library:scroll_top")}
patch={"?" <> encode_query(page: @page_number, page_size: @page_size, query: @query)}
>
{gettext("Next")}
@@ -129,6 +131,7 @@ defmodule MusicLibraryWeb.Pagination do
~H"""
<.link
class="relative inline-flex items-center rounded-l-md px-2 py-2 text-zinc-400 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-50 focus:z-20 focus:outline-offset-0"
+ phx-click={JS.dispatch("music_library:scroll_top")}
patch={"?" <> encode_query(page: @page_number, page_size: @page_size, query: @query)}
>
{gettext("Previous")}
@@ -168,6 +171,7 @@ defmodule MusicLibraryWeb.Pagination do
~H"""
<.link
class="relative hidden items-center first:rounded-l-md last:rounded-r-md px-4 py-2 text-sm font-semibold text-zinc-900 dark:text-zinc-400 ring-1 ring-inset ring-zinc-300 hover:bg-zinc-300 hover:text-zinc-500 focus:z-20 focus:outline-offset-0 md:inline-flex"
+ phx-click={JS.dispatch("music_library:scroll_top")}
patch={"?" <> encode_query(page: @page_number, page_size: @page_size, query: @query)}
>
{@page_number}
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 27e4bb62..6f1e5c28 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -156,8 +156,8 @@ msgstr ""
msgid "MusicBrainz ID"
msgstr ""
-#: lib/music_library_web/components/pagination.ex:49
-#: lib/music_library_web/components/pagination.ex:112
+#: lib/music_library_web/components/pagination.ex:50
+#: lib/music_library_web/components/pagination.ex:114
#, elixir-autogen, elixir-format
msgid "Next"
msgstr ""
@@ -183,8 +183,8 @@ msgstr ""
msgid "Password"
msgstr ""
-#: lib/music_library_web/components/pagination.ex:36
-#: lib/music_library_web/components/pagination.ex:134
+#: lib/music_library_web/components/pagination.ex:37
+#: lib/music_library_web/components/pagination.ex:137
#, elixir-autogen, elixir-format
msgid "Previous"
msgstr ""