Add configurable scroll-to-top behavior to dcc.Link

CHANGELOG.md

@@ -5,6 +5,7 @@ This project adheres to [Semantic Versioning](https://semver.org/).
 ## [Unreleased]
 
 ### Added
+- [#3976](https://github.com/plotly/dash/pull/3976) Add a new `scrollToTop` prop to `dcc.Link` to control whether the page scrolls to the top after client-side navigation. It defaults to `True` to preserve the existing behavior. Fixes [#3974](https://github.com/plotly/dash/issues/3974).
 - [#3947](https://github.com/plotly/dash/pull/3947) Make `plotly-cloud` a default install dependency of Dash instead of an optional extra, so the `plotly` CLI and Dash's cloud integration work out of the box. The `dash[cloud]` extra is kept for backward compatibility.
 - [#3930](https://github.com/plotly/dash/pull/3930) Add shared storage: a backend-agnostic cross-process state manager (key/value with optional TTL, plus ordered replayable pub/sub) on every app via `dash.ctx.shared_storage`, started lazily and disabled with `shared_storage=None`. Ships `LocalSharedStorage` (default, in-memory with optional disk persistence), `DiskcacheSharedStorage`, and `RedisSharedStorage` for horizontally-scaled deployments; see `.ai/ARCHITECTURE.md`.
 - [#3931](https://github.com/plotly/dash/pull/3931) Add streaming callbacks: an `async def` generator callback streams its yields to the browser as they are produced (`dash.Patch` yields apply incrementally). A browser's streams share one SharedWorker-hosted connection so they do not count against the per-host connection limit; closing a tab cancels its streams.

components/dash-core-components/src/components/Link.tsx

@@ -14,7 +14,11 @@ type LinkComponentProps = LinkProps & {
  * For links with destinations outside the current app, `html.A` is a better
  * component to use.
  */
-const Link = ({refresh = false, ...props}: LinkComponentProps) => {
+const Link = ({
+    refresh = false,
+    scrollToTop = true,
+    ...props
+}: LinkComponentProps) => {
     const {className, style, id, href, children, title, target, setProps} =
         props;
     const cleanUrl = window.dash_clientside.clean_url;
@@ -39,8 +43,9 @@ const Link = ({refresh = false, ...props}: LinkComponentProps) => {
             window.history.pushState({}, '', sanitizedUrl);
             window.dispatchEvent(new CustomEvent('_dashprivate_pushstate'));
         }
-        // scroll back to top
-        window.scrollTo(0, 0);
+        if (scrollToTop) {
+            window.scrollTo(0, 0);
+        }
     };
 
     useEffect(() => {

components/dash-core-components/src/types.ts

@@ -1,4 +1,4 @@
 import React, {ButtonHTMLAttributes, DetailedHTMLProps} from 'react';
 import {BaseDashProps, DashComponent} from '@dash-renderer/types';
 
 export enum PersistenceTypes {
@@ -1514,6 +1514,12 @@
      */
     refresh?: boolean;
 
+    /**
+     * Controls whether or not the page will scroll to the top when the link is
+     * clicked. Defaults to true.
+     */
+    scrollToTop?: boolean;
+
     /**
      * Adds the title attribute to your link, which can contain supplementary
      * information.

components/dash-core-components/tests/integration/link/test_scroll_to_top.py

@@ -0,0 +1,70 @@
+import pytest
+
+from dash import Dash, dcc, html
+from dash.testing.wait import until
+
+
+@pytest.mark.parametrize(
+    "link_props,scrolls_to_top",
+    [({}, True), ({"scrollToTop": False}, False)],
+    ids=["default", "disabled"],
+)
+def test_lisc001_scroll_to_top(dash_dcc, link_props, scrolls_to_top):
+    behavior = "enabled (default)" if scrolls_to_top else "disabled"
+    app = Dash(__name__)
+    app.layout = html.Div(
+        [
+            html.Div(
+                [
+                    html.H1("TOP OF PAGE", id="top-marker"),
+                    html.P("The default Link behavior returns here after a click."),
+                ],
+                id="top-section",
+                style={
+                    "height": "100vh",
+                    "padding": "1rem",
+                    "boxSizing": "border-box",
+                },
+            ),
+            html.Div(
+                [
+                    html.H1("BOTTOM OF PAGE", id="bottom-marker"),
+                    html.P(f"scrollToTop is {behavior}."),
+                    dcc.Link(
+                        "Click to navigate",
+                        href="/test-link",
+                        id="test-link",
+                        **link_props,
+                    ),
+                ],
+                id="bottom-section",
+                style={
+                    "height": "100vh",
+                    "padding": "1rem",
+                    "boxSizing": "border-box",
+                    "borderTop": "1px solid",
+                },
+            ),
+        ]
+    )
+
+    dash_dcc.start_server(app)
+
+    test_link = dash_dcc.wait_for_element("#test-link")
+    dash_dcc.driver.execute_script(
+        "document.getElementById('bottom-section').scrollIntoView()"
+    )
+    until(lambda: dash_dcc.driver.execute_script("return window.scrollY") > 0, 3)
+    initial_scroll_position = dash_dcc.driver.execute_script("return window.scrollY")
+
+    test_link.click()
+
+    until(lambda: dash_dcc.driver.current_url.endswith("/test-link"), 3)
+    expected_scroll_position = 0 if scrolls_to_top else initial_scroll_position
+    until(
+        lambda: dash_dcc.driver.execute_script("return window.scrollY")
+        == expected_scroll_position,
+        3,
+    )
+
+    assert dash_dcc.get_logs() == []