preact-scrollchor
The improved preact fork of react-scrollchor for scrolling to markup elements and/by setting the #hash. Scrollchor is a mix of
Scroll
andAnchor
, 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.
Installation
npm install preact-scrollchor --save
Usage
import Scrollchor from "preact-scrollchor" <div> <ul> <li> <Scrollchor ="#sample-code">Sample</Scrollchor> </li> <li> <Scrollchor ="footer">SignUp</Scrollchor> </li> </ul> <div ="sample-code" /> <footer ="footer" /> </div>
Custom animation
Animation behavior can be customized:
<Scrollchor ="#aboutus" => Home</Scrollchor>
Default animation settings
offset: 0 duration: 400 easing: easeOutQuad
This setting is equivalent to default jQuery.animate easing: swing
Easing
functions
More
before
and after
Animate callbacks
Use this callbacks to trigger behaviours like, for example, update state, load async stuffs, etc.
<Scrollchor ="#aboutus" => Home</Scrollchor>
Simulate click API
Scrollchor includes a dedicated API to invoke the scroll behavior programmatically using simulateClick()