search

bigskysoftware / htmx

</> htmx - high power tools for HTML
https://htmx.org
Other
38.19k stars 1.3k forks source link

Scroll to top by default when navigating with hx-boost #407

Closed jens closed 3 years ago

jens commented 3 years ago

When a link is boosted it would be nice to automatically be at the top of the page as one would be if it was a non boosted link. Currently the scroll position will be the same as it was on the page before navigating.

It is easy to configure with hx-swap="innerHTML show:top" but should probably be the default behaviour.

jens commented 3 years ago

One disadvantage with using "show:top" is that all anchor links breaks. Instead of going to the anchor it will go to the top of the page.

1cg commented 3 years ago

Thank you for contributing!

David-Guillot commented 3 years ago

Hi there,

This is a nice default option but I see no way to get the original behavior back: what if I want no scrolling at all?

David-Guillot commented 3 years ago

Okay there is a (not perfect) solution: appending a # to the link URL. I think show:noop would be preferable, what do you think?

1cg commented 3 years ago

agree

1cg commented 3 years ago

looking at the code, it looks like

hx-swap="show:unset"

should work. I will document this as a supported option.

David-Guillot commented 3 years ago

With v1.4.1, show:unset doesn't work. I've seen a discussion here about some unset behavior that would be similar, but unmerged yet.

boxed commented 2 years ago

I found this issue while trying to look if there was a bug report on the scrolling to top. I think this idea was merged without thinking through the consequences fully. If you want it to scroll to the top, why not just use a normal link instead of boost?

1cg commented 2 years ago

The idea is to have boosted links behave as much like "normal" links as possible, and normal links scroll to the top. If you want custom scrolling behavior, you can use a hx-get pretty easily.

peterhry commented 1 year ago

Possible to disable the smooth scrolling behaviour?

nwalters512 commented 1 year ago

This bit me today as I was getting started with HTMX for the first time. I was trying to make inline editing on a large table avoid reloading the whole page by adding hx-boost="true" to the form. It works perfectly except for the fact that it scrolls to the top, which loses the context on the page, which is what I was trying to avoid by adopting HTMX in the first place! Adding hx-swap="show:unset" didn't help for me either.

I suppose the "correct" hypermedia approach would be to add an endpoint that allows me to swap out only the row in question when it is changed, but I was hoping that hx-boost would provide a low-effort, high-value way of getting started with HTMX. Is there any possibility of making this configurable, even with hx-swap as suggested previously?

xhaggi commented 1 year ago

You have to use hx-swap="innerHTML show:unset" because without specifying the swap style innerHTML, outerHTML etc. the modifiers are not taken into account. You can actually use any keyword after show except top and bottom.