g12i / use-scroll-to

Scroll to React elements with custom timing function support

useScrollTo

Scroll to React elements with custom timing function support.

Demo

See here.

Quick start

npm install use-scroll-to-2

Trigger manually:

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

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

  return (
    <div>
      <button onClick={scroll}>Scroll to div</button>
      <div ref={ref}>
        Window will scroll to this element, when the button is clicked.
      </div>
    </div>
  );
}

Trigger on mount:

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

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

  return (
    <div>
      <div ref={ref}>
        Window will scroll to this element, as soon as it mounts.
      </div>
    </div>
  );
}

Configuration

All configuration options are optional.

duration (optional)

Scroll duration in milliseconds. Default 480.

delay (optional)

Scroll delay in milliseconds. Default 0.

easing (optional)

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

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

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).

auto (optional)

Start scrolling on element mount. Default false.

offsetTop (optional)

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

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

offsetLeft (optional)

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

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