react-scroll-into-view

A small React component that scrolls to a target element using Element.scrollIntoView() — in a fast, declarative way.

• Declarative wrapper around element.scrollIntoView
• Works with any clickable child (button, link, custom component)
• Supports smooth scrolling and native scrollIntoView options

Demo

Try the CodeSandbox example:
https://codesandbox.io/s/14lxm6jmm7

Installation

Pick your package manager:

# npm
npm install react-scroll-into-view

# yarn
yarn add react-scroll-into-view

# pnpm
pnpm add react-scroll-into-view

# bun
bun add react-scroll-into-view

Quick start

1) Import

import ScrollIntoView from 'react-scroll-into-view'

2) Use it

<ScrollIntoView selector="#footer">
  <button>
    Jump to bottom
  </button>
</ScrollIntoView>

{/* somewhere down the page */}
<div id="footer">Scroll target element</div>

How it works

ScrollIntoView renders a wrapper element that listens for clicks. When clicked, it finds the element matching selector and calls scrollIntoView() with the provided options.

If you need more control, pass scrollOptions (recommended) rather than relying on legacy booleans.

Props

| Name | Type | Default | Description | | --- | --- | --- | --- | | children | React.ReactNode | | Content rendered inside the component. | | selector | string | | Required. A valid CSS selector pointing to the target element to scroll to. | | smooth | boolean | true | When true, uses smooth scrolling (equivalent to scrollOptions.behavior = 'smooth'). | | style | React.CSSProperties | | Styles applied to the wrapper element. Note: prior to v1.4.0, the default was { display: 'inline' }. | | alignToTop | boolean | false | When true, aligns the top of the target to the top of the visible area. When false, aligns to the bottom. (Maps to scrollIntoView “block” alignment behavior.) | | className | string | | Class name applied to the wrapper element. | | onClick | (event: React.MouseEvent<HTMLElement>) => void | | Optional click callback (called in addition to scrolling). | | scrollOptions | ScrollIntoViewOptions | {} | Passed to element.scrollIntoView(options). See MDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView#parameters. Common fields: behavior (auto/smooth), block (start/center/end/nearest), inline (start/center/end/nearest). Only valid properties are used. |

Examples

Scroll with explicit options (recommended)

<ScrollIntoView selector="#footer">
  <button >
    Jump to bottom
  </button>
</ScrollIntoView>

<!-- somewhere down on our page we have our target element -->
<div id="footer">Scroll target element</div>

Disable smooth scrolling

<!-- NOTE selector "body" targets the entire page and scrolls to the top of the screen -->
<ScrollIntoView selector="body" smooth={false}>
  <button>Back to top</button>
</ScrollIntoView>

Changelog

See GitHub releases:
https://github.com/dominikbulaj/react-scroll-into-view/releases