The improved preact fork of react-scrollchor for scrolling to markup elements and/by setting the #hash. Scrollchor is a mix of Scroll and Anchor, a joke name for a useful component.

hash is the id of a HTML tag on current page.

If you're a react-person definitely check out the original version, I mainly didn't want to bother adding preact-compat and disliked quite a few aspects of the implementation.

npm install preact-scrollchor --save

import Scrollchor from "preact-scrollchor"

export default props => (
  <div>
    <ul>
      <li>
        <Scrollchor to="#sample-code">Sample</Scrollchor>
      </li>
      <li>
        <Scrollchor to="footer">SignUp</Scrollchor>
      </li>
    </ul>
    <div id="sample-code" />
    <footer id="footer" />
  </div>
)

Animation behavior can be customized:

<Scrollchor to="#aboutus" animate={{ offset: 20, duration: 600 }}>
  Home
</Scrollchor>

{ offset: 0, duration: 400, easing: easeOutQuad }

This setting is equivalent to default jQuery.animate easing: swing

• jQuery easings
• Robert Penner's Easing Functions
• Javascript source code

Use this callbacks to trigger behaviours like, for example, update state, load async stuffs, etc.

<Scrollchor to="#aboutus" afterAnimate={() => updateState(this)}>
  Home
</Scrollchor>

Scrollchor includes a dedicated API to invoke the scroll behavior programmatically using simulateClick()

ISC