diff --git a/assets/js/app.js b/assets/js/app.js
index cd5be24330..4d771675cd 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -17,7 +17,6 @@ import geoLocation from "./geolocation";
 import addressSearch from "./address-search";
 import googleTranslate from "./google-translate";
 import translateAnalytics from "./translate-analytics.js";
-import scrollTo from "./scroll-to";
 import stickyTooltip from "./sticky-tooltip";
 import timetableScroll from "./timetable-scroll";
 import timetableStyle from "./timetable-style";
@@ -132,7 +131,6 @@ geoLocation();
 addressSearch();
 googleTranslate();
 translateAnalytics();
-scrollTo();
 tabbedNav();
 timetableScroll();
 timetableStyle();
diff --git a/assets/js/scroll-to.js b/assets/js/scroll-to.js
deleted file mode 100644
index 85ce11066b..0000000000
--- a/assets/js/scroll-to.js
+++ /dev/null
@@ -1,38 +0,0 @@
-export default () => {
-  window.addEventListener("load", scrollTo, { passive: true });
-};
-
-const scrollTo = () => {
-  window.requestAnimationFrame(() => {
-    const initialElToScrollTo = document.querySelector("[data-scroll-to]");
-    if (initialElToScrollTo) {
-      doScrollTo(initialElToScrollTo);
-    }
-  });
-};
-
-const doScrollTo = el => {
-  const childLeft = el.offsetLeft;
-  const parentLeft = el.parentNode.offsetLeft;
-  const firstSiblingWidth = firstSibling(el).clientWidth;
-
-  // childLeft - parentLeft scrolls the first row to the start of the
-  // visible area.
-  const scrollLeft = childLeft - parentLeft - firstSiblingWidth;
-  let table = el.parentNode;
-  while (table.nodeName !== "TABLE") {
-    table = table.parentNode;
-  }
-  table.parentNode.scrollLeft = scrollLeft;
-};
-
-const firstSibling = element => {
-  const sibling = element.parentNode.firstChild;
-  if (sibling.nodeType === 1) {
-    return sibling;
-  } else if (sibling) {
-    return sibling.nextElementSibling;
-  } else {
-    return null;
-  }
-};
diff --git a/assets/ts/phoenix-hooks/scroll-into-view.ts b/assets/ts/phoenix-hooks/scroll-into-view.ts
index b436a30cd5..9328a7b52a 100644
--- a/assets/ts/phoenix-hooks/scroll-into-view.ts
+++ b/assets/ts/phoenix-hooks/scroll-into-view.ts
@@ -5,6 +5,11 @@ const ScrollIntoView: Partial<ViewHook> = {
     if (this.el) {
       this.el.scrollIntoView({ behavior: "smooth" });
     }
+  },
+  updated() {
+    if (this.el) {
+      this.el.scrollIntoView({ behavior: "smooth" });
+    }
   }
 };
 
diff --git a/lib/dotcom_web/components/trip_planner/input_form.ex b/lib/dotcom_web/components/trip_planner/input_form.ex
index 1633ae2859..1556b72985 100644
--- a/lib/dotcom_web/components/trip_planner/input_form.ex
+++ b/lib/dotcom_web/components/trip_planner/input_form.ex
@@ -16,9 +16,13 @@ defmodule DotcomWeb.Components.TripPlanner.InputForm do
 
   Otherwise, we just render the form.
   """
+
+  attr :class, :string, default: ""
+  attr :changeset, :any, required: true
+
   def input_form(assigns) do
     ~H"""
-    <section class="px-10 py-8 lg:px-20 lg:py-12 mb-4 bg-gray-100">
+    <section class={["px-10 py-8 lg:px-20 lg:py-12 bg-gray-100", @class]}>
       <.form
         :let={f}
         class="md:grid md:grid-cols-2 gap-x-8 gap-y-2"
diff --git a/lib/dotcom_web/components/trip_planner/results.ex b/lib/dotcom_web/components/trip_planner/results.ex
index 0a057f156f..c8a1179f12 100644
--- a/lib/dotcom_web/components/trip_planner/results.ex
+++ b/lib/dotcom_web/components/trip_planner/results.ex
@@ -10,10 +10,14 @@ defmodule DotcomWeb.Components.TripPlanner.Results do
 
   def results(assigns) do
     ~H"""
-    <section class={[
-      "w-full",
-      @class
-    ]}>
+    <section
+      id="trip-planner-results"
+      phx-hook="ScrollIntoView"
+      class={[
+        "w-full",
+        @class
+      ]}
+    >
       <div
         :if={Enum.count(@results.itinerary_groups) > 0 && @results.itinerary_group_selection}
         class="h-min w-full mb-3.5"
diff --git a/lib/dotcom_web/components/trip_planner/results_summary.ex b/lib/dotcom_web/components/trip_planner/results_summary.ex
index ac90939179..46fc0eec26 100644
--- a/lib/dotcom_web/components/trip_planner/results_summary.ex
+++ b/lib/dotcom_web/components/trip_planner/results_summary.ex
@@ -3,6 +3,12 @@ defmodule DotcomWeb.Components.TripPlanner.ResultsSummary do
 
   use DotcomWeb, :component
 
+  alias Dotcom.TripPlan.InputForm
+
+  attr :changeset, :any, required: true
+  attr :class, :string, default: ""
+  attr :results, :any, required: true
+
   def results_summary(assigns) do
     ~H"""
     <section
@@ -10,7 +16,7 @@ defmodule DotcomWeb.Components.TripPlanner.ResultsSummary do
         @results.loading? || Enum.count(@results.itinerary_groups) > 0 ||
           (@changeset.action && @changeset.valid?)
       }
-      class="mt-2 mb-6"
+      class={@class}
     >
       <p class="text-lg font-semibold mb-0">{submission_summary(@changeset.changes)}</p>
       <p>{time_summary(@changeset.changes)}</p>
diff --git a/lib/dotcom_web/live/trip_planner.ex b/lib/dotcom_web/live/trip_planner.ex
index c9fa1cd0ab..ef4ed6d6af 100644
--- a/lib/dotcom_web/live/trip_planner.ex
+++ b/lib/dotcom_web/live/trip_planner.ex
@@ -63,31 +63,33 @@ defmodule DotcomWeb.Live.TripPlanner do
   def render(assigns) do
     ~H"""
     <h1>Trip Planner <mark style="font-weight: 400">Preview</mark></h1>
-    <div style="row">
-      <.input_form changeset={@input_form.changeset} />
-      <.results_summary changeset={@input_form.changeset} results={@results} />
-      <div class={[
-        "flex flex-col gap-4 md:flex-row md:gap-7"
-      ]}>
-        <.live_component
-          module={MbtaMetro.Live.Map}
-          id="trip-planner-map"
-          class={[
-            "md:order-last",
-            "h-64 md:h-[32rem] w-full",
-            @results.itinerary_group_selection == nil && "hidden md:block",
-            @results.itinerary_group_selection != nil && "block"
-          ]}
-          config={@map.config}
-          lines={@map.lines}
-          pins={@map.pins}
-          points={@map.points}
-        />
-        <.results
-          :if={Enum.count(@results.itinerary_groups) > 0}
-          class="md:max-w-[25rem]"
-          results={@results}
-        />
+    <div>
+      <.input_form class="mb-4" changeset={@input_form.changeset} />
+      <div>
+        <.results_summary class="mt-2 mb-6" changeset={@input_form.changeset} results={@results} />
+        <div class={[
+          "flex flex-col gap-4 md:flex-row md:gap-7"
+        ]}>
+          <.live_component
+            module={MbtaMetro.Live.Map}
+            id="trip-planner-map"
+            class={[
+              "md:order-last md:sticky md:top-4",
+              "h-64 md:h-[32rem] w-full",
+              @results.itinerary_group_selection == nil && "hidden md:block",
+              @results.itinerary_group_selection != nil && "block"
+            ]}
+            config={@map.config}
+            lines={@map.lines}
+            pins={@map.pins}
+            points={@map.points}
+          />
+          <.results
+            :if={Enum.count(@results.itinerary_groups) > 0}
+            class="md:max-w-[25rem] md:sticky md:top-4"
+            results={@results}
+          />
+        </div>
       </div>
     </div>
     """