Getting Around

Hyperscript makes it easy to move users around the page or to entirely new pages, with simple English-like commands for navigation and scrolling.

Going Places

The go command navigates the browser to a new location:

Example: Going Elsewhere
<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 and forward in history, or navigate to a URL stored in a variable.

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 vertical alignment (top, middle, bottom) and horizontal alignment (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
Example: Scrolling Around
<button _="on click
              scroll to the top of the body smoothly
              wait 2s
              scroll to the bottom of me smoothly">
              Take A Trip
</button>