useScrollTo

Scroll to React elements with custom timing function support.

Demo

See here.

Quick start

``bash
npm install use-scroll-to-2
`

Trigger manually:

`jsx
import React from "react";
import { useScrollTo } from "use-scroll-to-2";

function App() {
const [ref, scroll] = useScrollTo();

return (


`jsx
import React from "react";
import { useScrollTo } from "use-scroll-to-2";

function App() {
const [ref] = useScrollTo({ auto: true });

return (


Scroll duration in milliseconds. Default 480.

$3

Scroll delay in milliseconds. Default 0.

$3

An easing function. This expects a function returned by excellent
bezier-easing library.

For convenience it is re-exported as bezier in this library.

`jsx
import { bezier, useScrollTo } from "use-scroll-to-2";

useScrollTo({
duration: 600,
easing: bezier(0.42, 0, 0.58, 1),
});
`

Default: bezier(0.25, 0.1, 0.25, 1).

$3

Start scrolling on element mount. Default false.

$3

A top offset. This can be either a number, or a function that takes scroll
direction and returns a number. Default: 0.

`jsx
useScrollTo({
duration: 600,
offsetTop: (dir) => (dir === -1 ? 50 : 0), // -1 -> going up, 1 -> down
});
`

$3

A left offset. This can be either a number, or a function that takes scroll
direction and returns a number. Default: 0.

`jsx
useScrollTo({
duration: 600,
offsetTop: (dir) => (dir === -1 ? 50 : 0), // -1 -> going left, 1 -> right
});
``