Tools: Building Smooth Scrolling with react-scroll in React

Prerequisites ## Installation ## Project Setup ## First Example / Basic Usage ## Understanding the Basics ## Practical Example / Building Something Real ## Common Issues / Troubleshooting ## Next Steps ## Summary ## SEO Keywords react-scroll is a React library that provides smooth scrolling functionality, scroll spy, and animated scrolling to specific elements on a page. It's perfect for creating single-page applications with navigation menus, smooth scroll-to-section behavior, and scroll-based animations. This guide walks through setting up and implementing smooth scrolling using react-scroll with React, from installation to a working implementation. Before you begin, make sure you have: Install react-scroll using your preferred package manager: After installation, your package.json should include: react-scroll requires minimal setup. Import the components and use them in your application. Let's create a simple smooth scrolling navigation. Create a new file src/ScrollExample.jsx: This creates a navigation menu with smooth scrolling to different sections. react-scroll provides scrolling components: Here's an example with scroll spy: Let's build a landing page with smooth scrolling navigation: This example demonstrates: Scrolling not working: Make sure Element components have unique name props that match Link to props. Check that elements are properly rendered in the DOM. Scroll position incorrect: Use offset prop to adjust scroll position. Check for fixed headers that might affect positioning. Scroll spy not updating: Ensure spy={true} and onSetActive handler are provided. Check that sections are properly sized and visible. Smooth scroll not smooth: Adjust duration prop for animation speed. Check browser compatibility for smooth scrolling. Links not clickable: Ensure Link components are properly rendered. Check for CSS that might be blocking clicks (pointer-events, z-index). Performance issues: For long pages, consider using offset to limit scroll distance. Optimize re-renders with React.memo if needed. Now that you have an understanding of react-scroll: You've successfully set up react-scroll in your React application and created smooth scrolling navigation with scroll spy and animated transitions. react-scroll provides a powerful solution for building single-page applications with elegant navigation in React. react-scroll react-scroll smooth scroll React smooth scrolling react-scroll installation React scroll navigation react-scroll tutorial React scroll spy react-scroll example React animated scroll react-scroll setup React scroll to element react-scroll getting started React single page navigation react-scroll advanced usage Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse COMMAND_BLOCK: npm install react-scroll Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: npm install react-scroll COMMAND_BLOCK: npm install react-scroll CODE_BLOCK: yarn add react-scroll Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: yarn add react-scroll CODE_BLOCK: yarn add react-scroll CODE_BLOCK: pnpm add react-scroll Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: pnpm add react-scroll CODE_BLOCK: pnpm add react-scroll CODE_BLOCK: { "dependencies": { "react-scroll": "^1.9.0", "react": "^18.0.0", "react-dom": "^18.0.0" } } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: { "dependencies": { "react-scroll": "^1.9.0", "react": "^18.0.0", "react-dom": "^18.0.0" } } CODE_BLOCK: { "dependencies": { "react-scroll": "^1.9.0", "react": "^18.0.0", "react-dom": "^18.0.0" } } CODE_BLOCK: // src/ScrollExample.jsx import React from 'react'; import { Link, Element } from 'react-scroll'; function ScrollExample() { return ( <div> <nav style={{ position: 'fixed', top: 0, width: '100%', backgroundColor: '#fff', padding: '10px', zIndex: 1000 }}> <Link to="section1" smooth={true} duration={500}> Section 1 </Link> {' '} <Link to="section2" smooth={true} duration={500}> Section 2 </Link> {' '} <Link to="section3" smooth={true} duration={500}> Section 3 </Link> </nav> <div style={{ marginTop: '60px' }}> <Element name="section1" style={{ height: '100vh', padding: '20px', backgroundColor: '#f0f0f0' }}> <h2>Section 1</h2> <p>This is the first section</p> </Element> <Element name="section2" style={{ height: '100vh', padding: '20px', backgroundColor: '#e0e0e0' }}> <h2>Section 2</h2> <p>This is the second section</p> </Element> <Element name="section3" style={{ height: '100vh', padding: '20px', backgroundColor: '#d0d0d0' }}> <h2>Section 3</h2> <p>This is the third section</p> </Element> </div> </div> ); } export default ScrollExample; Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: // src/ScrollExample.jsx import React from 'react'; import { Link, Element } from 'react-scroll'; function ScrollExample() { return ( <div> <nav style={{ position: 'fixed', top: 0, width: '100%', backgroundColor: '#fff', padding: '10px', zIndex: 1000 }}> <Link to="section1" smooth={true} duration={500}> Section 1 </Link> {' '} <Link to="section2" smooth={true} duration={500}> Section 2 </Link> {' '} <Link to="section3" smooth={true} duration={500}> Section 3 </Link> </nav> <div style={{ marginTop: '60px' }}> <Element name="section1" style={{ height: '100vh', padding: '20px', backgroundColor: '#f0f0f0' }}> <h2>Section 1</h2> <p>This is the first section</p> </Element> <Element name="section2" style={{ height: '100vh', padding: '20px', backgroundColor: '#e0e0e0' }}> <h2>Section 2</h2> <p>This is the second section</p> </Element> <Element name="section3" style={{ height: '100vh', padding: '20px', backgroundColor: '#d0d0d0' }}> <h2>Section 3</h2> <p>This is the third section</p> </Element> </div> </div> ); } export default ScrollExample; CODE_BLOCK: // src/ScrollExample.jsx import React from 'react'; import { Link, Element } from 'react-scroll'; function ScrollExample() { return ( <div> <nav style={{ position: 'fixed', top: 0, width: '100%', backgroundColor: '#fff', padding: '10px', zIndex: 1000 }}> <Link to="section1" smooth={true} duration={500}> Section 1 </Link> {' '} <Link to="section2" smooth={true} duration={500}> Section 2 </Link> {' '} <Link to="section3" smooth={true} duration={500}> Section 3 </Link> </nav> <div style={{ marginTop: '60px' }}> <Element name="section1" style={{ height: '100vh', padding: '20px', backgroundColor: '#f0f0f0' }}> <h2>Section 1</h2> <p>This is the first section</p> </Element> <Element name="section2" style={{ height: '100vh', padding: '20px', backgroundColor: '#e0e0e0' }}> <h2>Section 2</h2> <p>This is the second section</p> </Element> <Element name="section3" style={{ height: '100vh', padding: '20px', backgroundColor: '#d0d0d0' }}> <h2>Section 3</h2> <p>This is the third section</p> </Element> </div> </div> ); } export default ScrollExample; CODE_BLOCK: // src/App.jsx import React from 'react'; import ScrollExample from './ScrollExample'; import './App.css'; function App() { return ( <div className="App"> <ScrollExample /> </div> ); } export default App; Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: // src/App.jsx import React from 'react'; import ScrollExample from './ScrollExample'; import './App.css'; function App() { return ( <div className="App"> <ScrollExample /> </div> ); } export default App; CODE_BLOCK: // src/App.jsx import React from 'react'; import ScrollExample from './ScrollExample'; import './App.css'; function App() { return ( <div className="App"> <ScrollExample /> </div> ); } export default App; COMMAND_BLOCK: // src/AdvancedScrollExample.jsx import React, { useState } from 'react'; import { Link, Element, scroller } from 'react-scroll'; function AdvancedScrollExample() { const [activeSection, setActiveSection] = useState('section1'); const handleSetActive = (to) => { setActiveSection(to); }; const scrollToTop = () => { scroller.scrollTo('section1', { smooth: true, duration: 500 }); }; return ( <div> <nav style={{ position: 'fixed', top: 0, width: '100%', backgroundColor: '#fff', padding: '10px', zIndex: 1000 }}> <Link to="section1" smooth={true} duration={500} spy={true} onSetActive={handleSetActive} style={{ marginRight: '20px', color: activeSection === 'section1' ? '#007bff' : '#333' }} > Section 1 </Link> <Link to="section2" smooth={true} duration={500} spy={true} onSetActive={handleSetActive} style={{ marginRight: '20px', color: activeSection === 'section2' ? '#007bff' : '#333' }} > Section 2 </Link> <Link to="section3" smooth={true} duration={500} spy={true} onSetActive={handleSetActive} style={{ marginRight: '20px', color: activeSection === 'section3' ? '#007bff' : '#333' }} > Section 3 </Link> <button onClick={scrollToTop} style={{ padding: '5px 10px' }}> Scroll to Top </button> </nav> <div style={{ marginTop: '60px' }}> <Element name="section1" style={{ height: '100vh', padding: '20px', backgroundColor: '#f0f0f0' }}> <h2>Section 1</h2> <p>This is the first section</p> </Element> <Element name="section2" style={{ height: '100vh', padding: '20px', backgroundColor: '#e0e0e0' }}> <h2>Section 2</h2> <p>This is the second section</p> </Element> <Element name="section3" style={{ height: '100vh', padding: '20px', backgroundColor: '#d0d0d0' }}> <h2>Section 3</h2> <p>This is the third section</p> </Element> </div> </div> ); } export default AdvancedScrollExample; Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: // src/AdvancedScrollExample.jsx import React, { useState } from 'react'; import { Link, Element, scroller } from 'react-scroll'; function AdvancedScrollExample() { const [activeSection, setActiveSection] = useState('section1'); const handleSetActive = (to) => { setActiveSection(to); }; const scrollToTop = () => { scroller.scrollTo('section1', { smooth: true, duration: 500 }); }; return ( <div> <nav style={{ position: 'fixed', top: 0, width: '100%', backgroundColor: '#fff', padding: '10px', zIndex: 1000 }}> <Link to="section1" smooth={true} duration={500} spy={true} onSetActive={handleSetActive} style={{ marginRight: '20px', color: activeSection === 'section1' ? '#007bff' : '#333' }} > Section 1 </Link> <Link to="section2" smooth={true} duration={500} spy={true} onSetActive={handleSetActive} style={{ marginRight: '20px', color: activeSection === 'section2' ? '#007bff' : '#333' }} > Section 2 </Link> <Link to="section3" smooth={true} duration={500} spy={true} onSetActive={handleSetActive} style={{ marginRight: '20px', color: activeSection === 'section3' ? '#007bff' : '#333' }} > Section 3 </Link> <button onClick={scrollToTop} style={{ padding: '5px 10px' }}> Scroll to Top </button> </nav> <div style={{ marginTop: '60px' }}> <Element name="section1" style={{ height: '100vh', padding: '20px', backgroundColor: '#f0f0f0' }}> <h2>Section 1</h2> <p>This is the first section</p> </Element> <Element name="section2" style={{ height: '100vh', padding: '20px', backgroundColor: '#e0e0e0' }}> <h2>Section 2</h2> <p>This is the second section</p> </Element> <Element name="section3" style={{ height: '100vh', padding: '20px', backgroundColor: '#d0d0d0' }}> <h2>Section 3</h2> <p>This is the third section</p> </Element> </div> </div> ); } export default AdvancedScrollExample; COMMAND_BLOCK: // src/AdvancedScrollExample.jsx import React, { useState } from 'react'; import { Link, Element, scroller } from 'react-scroll'; function AdvancedScrollExample() { const [activeSection, setActiveSection] = useState('section1'); const handleSetActive = (to) => { setActiveSection(to); }; const scrollToTop = () => { scroller.scrollTo('section1', { smooth: true, duration: 500 }); }; return ( <div> <nav style={{ position: 'fixed', top: 0, width: '100%', backgroundColor: '#fff', padding: '10px', zIndex: 1000 }}> <Link to="section1" smooth={true} duration={500} spy={true} onSetActive={handleSetActive} style={{ marginRight: '20px', color: activeSection === 'section1' ? '#007bff' : '#333' }} > Section 1 </Link> <Link to="section2" smooth={true} duration={500} spy={true} onSetActive={handleSetActive} style={{ marginRight: '20px', color: activeSection === 'section2' ? '#007bff' : '#333' }} > Section 2 </Link> <Link to="section3" smooth={true} duration={500} spy={true} onSetActive={handleSetActive} style={{ marginRight: '20px', color: activeSection === 'section3' ? '#007bff' : '#333' }} > Section 3 </Link> <button onClick={scrollToTop} style={{ padding: '5px 10px' }}> Scroll to Top </button> </nav> <div style={{ marginTop: '60px' }}> <Element name="section1" style={{ height: '100vh', padding: '20px', backgroundColor: '#f0f0f0' }}> <h2>Section 1</h2> <p>This is the first section</p> </Element> <Element name="section2" style={{ height: '100vh', padding: '20px', backgroundColor: '#e0e0e0' }}> <h2>Section 2</h2> <p>This is the second section</p> </Element> <Element name="section3" style={{ height: '100vh', padding: '20px', backgroundColor: '#d0d0d0' }}> <h2>Section 3</h2> <p>This is the third section</p> </Element> </div> </div> ); } export default AdvancedScrollExample; COMMAND_BLOCK: // src/LandingPage.jsx import React, { useState } from 'react'; import { Link, Element } from 'react-scroll'; function LandingPage() { const [activeSection, setActiveSection] = useState('home'); const sections = [ { id: 'home', title: 'Home' }, { id: 'about', title: 'About' }, { id: 'services', title: 'Services' }, { id: 'contact', title: 'Contact' } ]; return ( <div> <header style={{ position: 'fixed', top: 0, width: '100%', backgroundColor: '#fff', padding: '15px 20px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)', zIndex: 1000 }}> <nav style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> <div style={{ fontSize: '24px', fontWeight: 'bold' }}>MyApp</div> <div> {sections.map(section => ( <Link key={section.id} to={section.id} smooth={true} duration={500} spy={true} onSetActive={() => setActiveSection(section.id)} style={{ marginLeft: '20px', textDecoration: 'none', color: activeSection === section.id ? '#007bff' : '#333', fontWeight: activeSection === section.id ? 'bold' : 'normal', cursor: 'pointer' }} > {section.title} </Link> ))} </div> </nav> </header> <div style={{ marginTop: '70px' }}> <Element name="home" style={{ height: '100vh', padding: '40px', backgroundColor: '#f8f9fa', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> <div style={{ textAlign: 'center' }}> <h1 style={{ fontSize: '48px', marginBottom: '20px' }}>Welcome to MyApp</h1> <p style={{ fontSize: '20px' }}>A modern React application</p> </div> </Element> <Element name="about" style={{ height: '100vh', padding: '40px', backgroundColor: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> <div> <h2 style={{ fontSize: '36px', marginBottom: '20px' }}>About Us</h2> <p style={{ fontSize: '18px', maxWidth: '600px' }}> We are a team of developers creating amazing React applications. </p> </div> </Element> <Element name="services" style={{ height: '100vh', padding: '40px', backgroundColor: '#f8f9fa', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> <div> <h2 style={{ fontSize: '36px', marginBottom: '20px' }}>Our Services</h2> <ul style={{ fontSize: '18px' }}> <li>Web Development</li> <li>Mobile Apps</li> <li>Consulting</li> </ul> </div> </Element> <Element name="contact" style={{ height: '100vh', padding: '40px', backgroundColor: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> <div> <h2 style={{ fontSize: '36px', marginBottom: '20px' }}>Contact Us</h2> <p style={{ fontSize: '18px' }}>Get in touch with us</p> </div> </Element> </div> </div> ); } export default LandingPage; Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: // src/LandingPage.jsx import React, { useState } from 'react'; import { Link, Element } from 'react-scroll'; function LandingPage() { const [activeSection, setActiveSection] = useState('home'); const sections = [ { id: 'home', title: 'Home' }, { id: 'about', title: 'About' }, { id: 'services', title: 'Services' }, { id: 'contact', title: 'Contact' } ]; return ( <div> <header style={{ position: 'fixed', top: 0, width: '100%', backgroundColor: '#fff', padding: '15px 20px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)', zIndex: 1000 }}> <nav style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> <div style={{ fontSize: '24px', fontWeight: 'bold' }}>MyApp</div> <div> {sections.map(section => ( <Link key={section.id} to={section.id} smooth={true} duration={500} spy={true} onSetActive={() => setActiveSection(section.id)} style={{ marginLeft: '20px', textDecoration: 'none', color: activeSection === section.id ? '#007bff' : '#333', fontWeight: activeSection === section.id ? 'bold' : 'normal', cursor: 'pointer' }} > {section.title} </Link> ))} </div> </nav> </header> <div style={{ marginTop: '70px' }}> <Element name="home" style={{ height: '100vh', padding: '40px', backgroundColor: '#f8f9fa', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> <div style={{ textAlign: 'center' }}> <h1 style={{ fontSize: '48px', marginBottom: '20px' }}>Welcome to MyApp</h1> <p style={{ fontSize: '20px' }}>A modern React application</p> </div> </Element> <Element name="about" style={{ height: '100vh', padding: '40px', backgroundColor: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> <div> <h2 style={{ fontSize: '36px', marginBottom: '20px' }}>About Us</h2> <p style={{ fontSize: '18px', maxWidth: '600px' }}> We are a team of developers creating amazing React applications. </p> </div> </Element> <Element name="services" style={{ height: '100vh', padding: '40px', backgroundColor: '#f8f9fa', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> <div> <h2 style={{ fontSize: '36px', marginBottom: '20px' }}>Our Services</h2> <ul style={{ fontSize: '18px' }}> <li>Web Development</li> <li>Mobile Apps</li> <li>Consulting</li> </ul> </div> </Element> <Element name="contact" style={{ height: '100vh', padding: '40px', backgroundColor: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> <div> <h2 style={{ fontSize: '36px', marginBottom: '20px' }}>Contact Us</h2> <p style={{ fontSize: '18px' }}>Get in touch with us</p> </div> </Element> </div> </div> ); } export default LandingPage; COMMAND_BLOCK: // src/LandingPage.jsx import React, { useState } from 'react'; import { Link, Element } from 'react-scroll'; function LandingPage() { const [activeSection, setActiveSection] = useState('home'); const sections = [ { id: 'home', title: 'Home' }, { id: 'about', title: 'About' }, { id: 'services', title: 'Services' }, { id: 'contact', title: 'Contact' } ]; return ( <div> <header style={{ position: 'fixed', top: 0, width: '100%', backgroundColor: '#fff', padding: '15px 20px', boxShadow: '0 2px 4px rgba(0,0,0,0.1)', zIndex: 1000 }}> <nav style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}> <div style={{ fontSize: '24px', fontWeight: 'bold' }}>MyApp</div> <div> {sections.map(section => ( <Link key={section.id} to={section.id} smooth={true} duration={500} spy={true} onSetActive={() => setActiveSection(section.id)} style={{ marginLeft: '20px', textDecoration: 'none', color: activeSection === section.id ? '#007bff' : '#333', fontWeight: activeSection === section.id ? 'bold' : 'normal', cursor: 'pointer' }} > {section.title} </Link> ))} </div> </nav> </header> <div style={{ marginTop: '70px' }}> <Element name="home" style={{ height: '100vh', padding: '40px', backgroundColor: '#f8f9fa', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> <div style={{ textAlign: 'center' }}> <h1 style={{ fontSize: '48px', marginBottom: '20px' }}>Welcome to MyApp</h1> <p style={{ fontSize: '20px' }}>A modern React application</p> </div> </Element> <Element name="about" style={{ height: '100vh', padding: '40px', backgroundColor: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> <div> <h2 style={{ fontSize: '36px', marginBottom: '20px' }}>About Us</h2> <p style={{ fontSize: '18px', maxWidth: '600px' }}> We are a team of developers creating amazing React applications. </p> </div> </Element> <Element name="services" style={{ height: '100vh', padding: '40px', backgroundColor: '#f8f9fa', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> <div> <h2 style={{ fontSize: '36px', marginBottom: '20px' }}>Our Services</h2> <ul style={{ fontSize: '18px' }}> <li>Web Development</li> <li>Mobile Apps</li> <li>Consulting</li> </ul> </div> </Element> <Element name="contact" style={{ height: '100vh', padding: '40px', backgroundColor: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> <div> <h2 style={{ fontSize: '36px', marginBottom: '20px' }}>Contact Us</h2> <p style={{ fontSize: '18px' }}>Get in touch with us</p> </div> </Element> </div> </div> ); } export default LandingPage; CODE_BLOCK: // src/App.jsx import React from 'react'; import LandingPage from './LandingPage'; import './App.css'; function App() { return ( <div className="App"> <LandingPage /> </div> ); } export default App; Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: // src/App.jsx import React from 'react'; import LandingPage from './LandingPage'; import './App.css'; function App() { return ( <div className="App"> <LandingPage /> </div> ); } export default App; CODE_BLOCK: // src/App.jsx import React from 'react'; import LandingPage from './LandingPage'; import './App.css'; function App() { return ( <div className="App"> <LandingPage /> </div> ); } export default App; - Node.js version 14.0 or higher installed - npm, yarn, or pnpm package manager - A React project (version 16.8 or higher) or create-react-app setup - Basic knowledge of React hooks (useState, useEffect) - Familiarity with JavaScript/TypeScript - Understanding of DOM scrolling - Link: Component for triggering smooth scroll to an element - Element: Wrapper component that defines scrollable sections - animateScroll: Function for programmatic scrolling - scroller: Utility for scroll operations - Smooth scrolling: Animated scroll to target elements - Scroll spy: Highlight active section in navigation - Element names: Use name prop to identify scroll targets - Duration: Control scroll animation speed - Offset: Adjust scroll position offset - Landing page navigation - Smooth scrolling between sections - Active section highlighting - Fixed navigation header - Scroll spy functionality - Professional layout - Scrolling not working: Make sure Element components have unique name props that match Link to props. Check that elements are properly rendered in the DOM. - Scroll position incorrect: Use offset prop to adjust scroll position. Check for fixed headers that might affect positioning. - Scroll spy not updating: Ensure spy={true} and onSetActive handler are provided. Check that sections are properly sized and visible. - Smooth scroll not smooth: Adjust duration prop for animation speed. Check browser compatibility for smooth scrolling. - Links not clickable: Ensure Link components are properly rendered. Check for CSS that might be blocking clicks (pointer-events, z-index). - Performance issues: For long pages, consider using offset to limit scroll distance. Optimize re-renders with React.memo if needed. - Explore scroll animations - Learn about scroll events - Implement parallax effects - Add scroll progress indicators - Create scroll-triggered animations - Integrate with routing libraries - Check the official repository: https://github.com/fisshy/react-scroll