Quick answer (featured snippet)

If you need smooth scrolling in React, install react-scroll (npm install react-scroll), wrap your sections with Element, and use Link to scroll—example below. For programmatic scrolls use animateScroll or scroller. This gives single-page navigation, offsets, and ScrollSpy with minimal boilerplate.

Short code to get started:

// Install
npm install react-scroll

// Example
import { Link, Element, animateScroll as scroll } from 'react-scroll';

<nav>
  <Link to="section1" smooth={true} duration={500}>Section 1</Link>
</nav>

<Element name="section1">...content...</Element>

For a step-by-step tutorial and real-world examples, see this react-scroll tutorial: Building Smooth Scrolling with react-scroll.

Why choose react-scroll for smooth scrolling?

react-scroll focuses on single-page navigation and in-page anchors with zero fuss: it provides declarative Link and Element components, plus imperative APIs (animateScroll, scroller) for programmatic control. That makes it ideal for landing pages, documentation sites, and one-page apps where jumping between sections should feel polished.

Compared with rolling your own scroll logic, react-scroll handles easing, duration, offsets, and edge cases like fixed headers out of the box. It also supports ScrollSpy behavior, so your navigation can reflect the current section without extra wiring.

It’s lightweight and React-friendly: you get a small API surface and predictable props (smooth, duration, offset, spy, activeClass). If you need animated scrolls without a large dependency footprint, react-scroll is a pragmatic choice.

Getting started — installation and basic setup

Install react-scroll with npm or yarn. After installation, import the pieces you need. The most common ones are Link (navigation triggers), Element (scroll targets) and animateScroll (programmatic scrolling).

Commands:

npm install react-scroll
# or
yarn add react-scroll

Basic usage pattern: wrap each scroll target with <Element name="targetName"> and use <Link to="targetName" smooth={true}> for navigation. The to prop matches the name prop of Element. This yields semantic, accessible in-page navigation that degrades gracefully.

Core components and APIs explained

Key pieces of react-scroll are:

Link: declarative trigger. Props include to, smooth, duration, offset, spy, and activeClass. When spy is true, the Link listens to scroll events and toggles the activeClass when its target is in view (ScrollSpy).

Element: mark the target. Use <Element name="foo"> around the section you want to scroll to. You can nest Elements and use unique names for each target.

Imperative helpers: animateScroll (scrollToTop, scrollTo) and scroller (scrollTo with more control) are useful for programmatic navigation. Example below shows both declarative and programmatic patterns.

import { Link, Element, animateScroll as scroll, scroller } from 'react-scroll';

// Declarative
<Link to="about" smooth={true} duration={600}>About</Link>
<Element name="about">About content</Element>

// Programmatic
scroll.scrollToTop();
scroller.scrollTo('contact', { duration: 500, smooth: true, offset: -50 });

Advanced usage and tips (ScrollSpy, offsets, easing)

ScrollSpy: enable spy on Links and provide an activeClass. The library will add that class when the target enters the viewport. This is ideal for highlighting nav items automatically as the user scrolls.

Offsets: if you have a fixed header, use the offset prop (positive or negative) on Link or scroller to adjust the final scroll position. Example: offset={-80} moves the target 80 pixels above final viewport so content isn’t hidden behind the header.

Easing and duration: control feel with duration (ms) and pass an easing function or string. For consistent UX, keep durations between 300–800ms for most transitions; longer durations feel sluggish on mobile.

// ScrollSpy Link example
<Link to="features" spy={true} smooth={true} offset={-70} duration={400} activeClass="is-active">Features</Link>

Performance, accessibility, and ‘reduced motion’

Respect user preferences: check the prefers-reduced-motion media query in JS or CSS. If a user requests reduced motion, set durations to 0 or fallback to default anchor jumps so you don’t trigger undesired animations.

Accessibility: when scrolling programmatically, ensure focus is managed. After a scroll, call element.focus() when appropriate and use skip links or native anchors when possible. Also expose visible focus states on navigation items so keyboard users can track movement.

Performance: avoid heavy scroll event handlers. react-scroll uses optimized listeners, but you should still minimize work inside callbacks. For long pages, consider debouncing expensive calculations and prefer CSS-based transitions where possible.

Troubleshooting common issues

If scrolls don’t work, confirm that the Element name matches the Link’s to prop and that there are no duplicate names. Also check that the scroll container is the window or the same scrollable node react-scroll expects; for nested scrolling regions you may need to pass containerId or use scroller with the correct container.

Server-side rendering: react-scroll manipulates the DOM so guard imports in SSR contexts or use dynamic import to avoid window being undefined. Another common issue is CSS: if your container has overflow hidden or scrollbars on a parent element, the scroll target might not calculate positions correctly — verify layout and stacking contexts.

Offsets miscalculated? Remember fixed headers and sticky elements alter scroll positions. Use offset prop and test on relevant viewport sizes. For any lingering confusion, see this practical tutorial and examples: react-scroll tutorial and examples.

Code example — single-page navigation with ScrollSpy

This example demonstrates a small nav that highlights the active link as you scroll. It also respects an 80px header offset.

import React from 'react';
import { Link, Element } from 'react-scroll';

export default function App() {
  return (
    <div>
      <header style={{height:80,position:'fixed',top:0,left:0,right:0,background:'#fff',zIndex:10}}>Header</header>
      <nav style={{marginTop:90}}>
        <Link to="home" smooth={true} duration={400} spy={true} offset={-80} activeClass="active">Home</Link>
        <Link to="about" smooth={true} duration={400} spy={true} offset={-80} activeClass="active">About</Link>
        <Link to="contact" smooth={true} duration={400} spy={true} offset={-80} activeClass="active">Contact</Link>
      </nav>

      <main>
        <Element name="home"><section style={{height:'100vh'}}>Home content</section></Element>
        <Element name="about"><section style={{height:'100vh'}}>About content</section></Element>
        <Element name="contact"><section style={{height:'100vh'}}>Contact content</section></Element>
      </main>
    </div>
  );
}

Further resources & backlinks

For a guided walkthrough and extra examples (including animated scrolls and scroller usage), check this tutorial: Building Smooth Scrolling with react-scroll. It complements the examples above with practical setup notes and gotchas.

Official repo and docs are also useful for advanced API reference; search for “react-scroll GitHub” or see the tutorial above for links to the canonical docs.

FAQ

How do I install and get started with react-scroll?

Install via npm or yarn (npm install react-scroll). Import Link and Element for declarative navigation and wrap targets with Element. Use animateScroll or scroller for programmatic scrolls. Example and setup are shown above.

How do I implement ScrollSpy with react-scroll?

Add spy={true} and activeClass="your-class" to Link components and wrap scroll destinations with <Element name="..."/>. react-scroll will toggle the active class as the page scroll position intersects targets, allowing you to style active nav items.

How do I make react-scroll accessible and respect reduced motion?

Detect prefers-reduced-motion and set duration to 0 or use native anchors for reduced-motion users. After programmatic scrolling, move keyboard focus to the target for screen-reader users and ensure focus outlines are visible. These steps keep scrolling behavior usable for everyone.