New config option to enable / disable scroll to top after swapping a …

…boosted link or form
bigskysoftware · Nov 3, 2023 · 6b827a0 · 6b827a0
1 parent 04250d5
commit 6b827a0
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/src/htmx.js b/src/htmx.js
@@ -74,7 +74,8 @@ return (function () {
                 getCacheBusterParam: false,
                 globalViewTransitions: false,
                 methodsThatUseUrlParams: ["get"],
-                selfRequestsOnly: false
+                selfRequestsOnly: false,
+                scrollTopOnBoost: true
             },
             parseInterval:parseInterval,
             _:internalEval,
@@ -2641,7 +2642,7 @@ return (function () {
                 "swapDelay" : htmx.config.defaultSwapDelay,
                 "settleDelay" : htmx.config.defaultSettleDelay
             }
-            if (getInternalData(elt).boosted && !isAnchorLink(elt)) {
+            if (htmx.config.scrollTopOnBoost && getInternalData(elt).boosted && !isAnchorLink(elt)) {
               swapSpec["show"] = "top"
             }
             if (swapInfo) {

diff --git a/www/content/api.md b/www/content/api.md
@@ -121,6 +121,7 @@ Note that using a [meta tag](@/docs.md#config) is the preferred mechanism for se
 * `withCredentials:false` - boolean: allow cross-site Access-Control requests using credentials such as cookies, authorization headers or TLS client certificates
 * `wsReconnectDelay:full-jitter` - string/function: the default implementation of `getWebSocketReconnectDelay` for reconnecting after unexpected connection loss by the event code `Abnormal Closure`, `Service Restart` or `Try Again Later`
 * `scrollBehavior:smooth` - string: the behavior for a boosted link on page transitions. The allowed values are `auto` and `smooth`. Smooth will smoothscroll to the top of the page while auto will behave like a vanilla link.
+* `scrollTopOnBoost:true` - boolean: whether or not to scroll to the top after swapping a boosted link or form.
 
 ##### Example
 

diff --git a/www/content/attributes/hx-swap.md b/www/content/attributes/hx-swap.md
@@ -112,6 +112,15 @@ You may also use `window:top` and `window:bottom` to scroll to the top and botto
   </div>
 ```
 
+For boosted links and forms the default behaviour is `show:top`. You can disable it globally with
+[htmx.config.scrollTopOnBoost](@/api.md#config) or you can use `hx-swap="show:none"` on an element basis.
+
+```html
+<form action="/example" hx-swap="show:none">
+  ...
+</form>
+```
+
 #### Focus scroll
 
 htmx preserves focus between requests for inputs that have a defined id attribute. By default htmx prevents auto-scrolling to focused inputs between requests which can be unwanted behavior on longer requests when the user has already scrolled away. To enable focus scroll you can use `focus-scroll:true`.