Installation & getting started

To add smooth scrolling to a React app quickly, install react-scroll from npm or Yarn. The package exposes components and helpers such as Link, Element, animateScroll, and scroller that let you wire navigation to scroll actions without reinventing the wheel.

Run one of the following in your project root. Pick the package manager you use:

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

After install, import the parts you need. If you want the latest source, check the official repository at react-scroll GitHub. For a concise tutorial and a real-world walkthrough, see this example tutorial: react-scroll tutorial.

Basic example: link-to-section and scroll-to-element

The simplest pattern uses Link and Element from react-scroll. Link behaves like a nav anchor but animates instead of jumping, and Element is a target wrapper with a name prop. This pattern is ideal for single-page navigation where you want a smooth transition between sections.

Here’s a minimal example that demonstrates in-place scrolling with offset handling (useful when you have a fixed header):

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

export default function Page() {
  return (
    <div>
      <nav>
        <Link to="section1" smooth={true} duration={500} offset={-70}>Section 1</Link>
        <Link to="section2" smooth={true} duration={500} offset={-70}>Section 2</Link>
      </nav>

      <Element name="section1"><h2>Section 1</h2></Element>
      <Element name="section2"><h2>Section 2</h2></Element>
    </div>
  );
}

This approach keeps markup semantic and works with the library’s scroll animation engine. The offset prop compensates for sticky or fixed headers, while duration controls the animation time for a natural feel.

Advanced usage: scroll spy, dynamic offsets, and programmatic control

For responsive navigation that highlights the active section, enable spy on Link. The library will watch scroll position and add an active class when the linked Element is near the viewport center. This is scroll spy in a nutshell: it provides visual context to users as they move through content.

Programmatic scrolling is available via animateScroll and scroller. Use animateScroll.scrollToTop(), animateScroll.scrollTo(y), or scroller.scrollTo(name, options) to initiate scrolls from code (for example, after form submission or exploring deep links). scroller is useful when you don’t have a Link element to click.

If sections change height (images load, async content), set isDynamic on Link or call scroller.refresh() so measurements are recalculated. Another advanced pattern is combining react-scroll with react-router: intercept route changes, then call scrollTo for route fragments to simulate anchor behavior without page reloads.

Smooth animated scrolling techniques and options

react-scroll exposes multiple knobs to control ease, duration, and behavior. These options let you craft scrolling that feels native to the platform and consistent across browsers. Use them sparingly—the goal is a smooth, unobtrusive transition.

Common options include duration, delay, smooth, offset, containerId, and spy. To reduce jank on low-end devices, favor shorter durations and avoid chaining many animations simultaneously.

• duration: animation time in ms (e.g., 300–600)
• smooth: boolean or easing name for interpolation
• offset: pixel offset to compensate for headers

Example programmatic scroll with scroller and easing:

import { scroller } from "react-scroll";

scroller.scrollTo("contact", {
  duration: 600,
  delay: 50,
  smooth: "easeInOutQuart",
  offset: -64
});

React scroll navigation patterns for single-page apps

In SPAs, navigation should feel instantaneous while maintaining context. Use react-scroll for top-level anchors (hero, features, pricing) and combine it with scroll spy for active state. For nested navigation (e.g., long docs), use Element wrappers per subsection and a compact in-page table of contents with Link items.

Mobile patterns often include a slide-out drawer. When opening the drawer, attach click handlers to Link components to call a closeDrawer function after the scroll starts or completes. Debounce interactions to avoid multiple animations fighting each other.

If you integrate with a router, handle deep links by reading the hash or a route param and calling scroller.scrollTo during component mount or after data is ready. Be careful with Server-Side Rendering (SSR): run scroll calls inside useEffect so they only run client-side.

Accessibility and performance considerations

Smooth scrolling is delightful, but not all users want motion. Respect prefers-reduced-motion: if the user requests reduced motion, fall back to an instant jump or a very brief animation. You can detect this with a CSS media query or JS and toggle the smooth prop accordingly.

Manage keyboard focus: after a programmatic scroll to a section, set focus to the section’s first focusable element or an anchor so screen reader users know context shifted. This keeps your site usable for assistive technologies and is important for accessibility compliance.

Performance tip: avoid forcing layout thrashing during scroll events. Let the library handle animations rather than attaching heavy scroll listeners. Where possible, use CSS scroll-behavior: smooth for simple cases and defer to JavaScript only when you need advanced control (offsets, scrollers, or custom easing).

Troubleshooting common issues

If clicking a Link seems to do nothing, first confirm the Element’s name matches the Link’s to prop. Mismatched or missing names are the most common oversight. Also check that the elements are rendered at the time of click—async content or collapsed sections can break measurement.

When integrating with fixed headers, remember to set offset. If active classes don’t update on resize or content load, call scroller.refresh() or ensure Links have isDynamic set so positions are recalculated. For SSR frameworks, guard scroll calls with checks like typeof window !== “undefined”.

• Check name prop pairing and rendering timing
• Use offset for fixed headers
• Call scroller.refresh() after layout changes

If you run into type errors in TypeScript, install update types or cast generics where necessary—react-scroll has community type definitions that are stable but sometimes lag behind API changes.

Semantic core (expanded keywords & clusters)

react-scroll
react-scroll smooth scroll
react smooth scrolling
react-scroll installation
react scroll navigation

react-scroll tutorial
react-scroll example
react scroll spy
react animated scroll
react-scroll setup
react-scroll getting started

how to use react-scroll in react
react scroll to element
react-scroll scrollToTop
react-scroll scroller example
react-scroll offset for fixed header
react-scroll programmatic scroll
react scroll single page navigation
react scroll accessibility
react-scroll performance tips
animated scroll in react

This semantic core groups intent: installation/how-to, examples/tutorials, navigation & scroll spy, animation options, and accessibility/performance. Use phrases naturally in headings, alt texts, and code comments to improve relevance for both users and search engines.

Related user questions (collected)

Common community questions that informed this guide:

• How do I install and import react-scroll?
• How do I scroll to an element with offset for a fixed header?
• How to implement scroll spy (active nav) with react-scroll?
• How to programmatically scroll to top or a specific Y position?
• Does react-scroll support SSR and React Router?
• How to respect prefers-reduced-motion with animated scroll?
• What are alternative libraries or CSS-only smooth scrolling approaches?

Below are the three most relevant questions and succinct answers for FAQ and featured snippets.

FAQ

1. How do I scroll to an element with react-scroll?

Use Link and Element components: wrap the target with Element name=”targetName” and create a Link with to=”targetName” plus smooth and duration props. For programmatic control, use scroller.scrollTo(“targetName”, options) or animateScroll.scrollTo(y).

2. How can I implement active navigation (scroll spy)?

Add spy={true} to your Link components and provide a className or activeClass to style the active item. Optionally set offset or isDynamic if section heights change to keep the active state accurate.

3. How do I respect prefers-reduced-motion?

Detect the user’s preference using window.matchMedia(“(prefers-reduced-motion: reduce)”) and disable smooth animation (use smooth={false}) or minimize duration. Also ensure keyboard and focus transitions remain logical for users who cannot tolerate motion.

Further reading & resources

Official repository: react-scroll GitHub — includes examples, props list, and issues for community help.

Intro tutorial and a practical walkthrough: react-scroll tutorial.

React core documentation and hooks patterns: React docs — useful when combining react-scroll with router or SSR patterns.