§ _hyperscript documentation

§ Getting Around

Hyperscript provides English-like commands for navigation and scrolling within and between pages.

§ Going Places

The go command navigates the browser to a new location:

<button _="on click go to https://htmx.org">
  Go Check Out htmx
</button>

You can also navigate within the page using URL fragments, go back in history, or navigate to a URL stored in a variable:

go to #section-2              -- jump to an anchor on the page
go back                       -- browser back
set $url to "/dashboard"
go to $url                    -- navigate to a URL from a variable
go to "/help" in new window   -- open in a new window

§ Scrolling

The scroll command scrolls an element into view:

scroll to #target
scroll to the top of #target smoothly
scroll to the bottom of me instantly

You can specify which vertical edge to scroll to (top, middle, bottom) and which horizontal edge (left, center, right), as well as an offset:

scroll to the top of #target +50px smoothly

Use in to scroll within a specific container without affecting outer scroll:

scroll to #item in #sidebar smoothly

The scroll by form scrolls by a relative amount. The direction defaults to down if omitted:

scroll down by 200px
scroll #panel left by 100px smoothly

<button _="on click
             scroll to the top of the body smoothly
             wait 2s
             scroll to the bottom of the body smoothly">
  Take A Trip
</button>