Have you ever been working on a project and wanted to scroll smoothly through your app? With you'll be able to do that in less than 10 minutes! react-scroll is a component to animate your vertical scroll, and it's effortless to use. In this article, I'm going to show you how to add it to your . react-scroll React Components After finishing this article, you're going to end up with this: Live Demo Feel free to clone my if you want to code along! GitHub repository git git@github.com:bernardogarza/react-scroll-tutorial.git clone Make sure you're in the branch. react-smoothless git checkout react-smoothless Let's get into it If you are working on my cloned repository, make sure to run or (this might take a few minutes). npm install yarn If you are starting a project from scratch, you'll need to install the npm package. npm install react-scroll yarn add react-scroll // or First things first, let's start the server, this will automatically refresh your browser when you save a file. You can view it in the browser at . localhost:3000 npm start yarn start //or The Link Component The first thing we need to do to start using react-scroll is importing the component from into the component where we have our links, in this case, the component. Link react-scroll Navbar The Link component will allow us to animate our scrolling when we click on a link. React ; styled ; { Link } ; // navbar.component.jsx import from 'react' import from 'styled-components' import from 'react-scroll' As you can see, we are using styled-components but, that's a topic for a future article. Let's focus on the component for now. Link After we imported the Link component, we need to replace our tags with the Link component. <a> I recommend this extension for Visual Studio Code called , it automatically changes your closing tag while editing the opening one. It will save you a lot of time and confusion while editing tags. Auto Rename Tag { ( <div className="header"> <Link activeClass="active" to="section1" spy={true} smooth={true} duration={1000}> Section 1 </Link> <Link activeClass="active" to="section2" spy={true} smooth={true} duration={1000}> Section 2 </Link> <Link activeClass="active" to="section3" spy={true} smooth={true} duration={1000}> Section 3 </Link> </div> <div className="scrolling-buttons"> <Wrapper> <OnScreenScrolling /> </Wrapper> </div> ); } // navbar.component.jsx export default ( ) function Navbar return < > NavbarStyled </ > NavbarStyled You might be wondering what are all those properties inside the component, well, allow me to explain it to you: Link : class applied when the element is reached. This means that whenever you click on the Link component, that class will be applied to that Link component. activeClass : target to scroll to. Here we are going to put the id of the element we want to scroll to. to : make Link selected when the scroll is at its target position. spy : animate the scrolling. That's basically the whole point of this. smooth duration: time of the scroll animation - can be a number (milliseconds) or a function ( ), that allows more granular control at run-time. function (scrollDistanceInPx) { return duration; } Don't forget that the component that you want to link should have the same id that we used on the property that we have in the component. Here is an example: to Link React ; styled ; Wrapper ; Section1Styled = styled.div ; { ( <Wrapper> <h1>Section 1</h1> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat blanditiis adipisci eaque animi repellat atque assumenda corporis quidem nostrum ea, nulla qui cupiditate suscipit, quisquam voluptas mollitia ex iusto voluptates. </p> </Wrapper> ); } // section1.component.jsx import from 'react' import from 'styled-components' import from '../wrapper/wrapper.component' const ` background-color: darkviolet; .active { border-bottom: 1px solid white; } ` export default ( ) function Section1 return < = > Section1Styled id "section1" </ > Section1Styled You can see that we have on our first component. to="section1" Link This is how our file should look: React ; styled ; { Link } ; OnScreenScrolling ; Wrapper ; NavbarStyled = styled.div ; { ( <div className="header"> <Link activeClass="active" to="section1" spy={true} smooth={true} duration={1000}> Section 1 </Link> <Link activeClass="active" to="section2" spy={true} smooth={true} duration={1000}> Section 2 </Link> <Link activeClass="active" to="section3" spy={true} smooth={true} duration={1000}> Section 3 </Link> </div> <div className="scrolling-buttons"> <Wrapper> <OnScreenScrolling /> </Wrapper> </div> ); } //navbar.component.jsx import from 'react' import from 'styled-components' import from 'react-scroll' import from '../on-screen-scrolling/on-screen-scrolling.component' import from '../wrapper/wrapper.component' const ` font-size: 24px; position: fixed; width: 100%; .header { background: black; padding: 40px; display: flex; justify-content: space-around; margin: 0; color: white; * { cursor: pointer; } .active { border-bottom: 1px solid white; } } .scrolling-buttons { display: flex; flex-direction: column; } ` export default ( ) function Navbar return < > NavbarStyled </ > NavbarStyled And that's it, just like that you have working on your Navbar links. Pretty easy, don't you think? react-scroll There's one more thing that I want to cover in this article, it's going to be super easy too! and I promise it will be useful. The animateScroll You might have noticed some random buttons in our app, well, let's make those buttons functional. The will allow us to perform more specific types of scrolling. We are not going to be limited to just scrolling straight to with . Using this we are going to be able to scroll from top to bottom and vice versa and scroll a specific amount of pixels per click. animateScroll divs ids Let's start by importing the into our file. animateScroll on-screen-scrolling React ; styled ; { animateScroll scroll } ; // on-screen-scrolling.component.jsx import from 'react' import from 'styled-components' import as from 'react-scroll' You can see that we are importing , which is for replacing the name of the component to make it easier to write. You can give it the name you want. It would work the same way if we added this into our function: animateScroll as scroll OnScreenScrolling scroll = animateScroll; let Now that we have imported let's start working with the functions. animateScroll To assign custom scrolling to our buttons, we will need to create functions that will be called using an . The allows you to call a function and perform an action when an element is clicked. onClick handler onClick handler First, we need to create our functions, these need to be inside of the function. These functions are pretty straight forward. OnScreenScrolling Let's start with the functions that are going to . scroll up The first one is going to be for scrolling to the top of our page. { scroll.scrollToTop(); } // on-screen-scrolling.component.jsx ( ) function scrollToTop The scroll to top and scroll to bottom functions are pretty self-explanatory, there is not much to say about them. Now we are going to add a function to scroll 300 pixels up. { scroll.scrollMore( ); } // on-screen-scrolling.component.jsx ( ) function scrollMoreUp300 -300 As you can see, the function is taking an argument of -300, that argument is the pixels that we want to scroll. In this case, we want to scroll up, so we need to have a negative amount of pixels for that to happen. This last one is the same as the one that we just talked about but for scrolling 100px instead of 300px. { scroll.scrollMore( ); } // on-screen-scrolling.component.jsx ( ) function scrollMoreUp100 -100 Remember that the values of the arguments in these functions are negative because we want to scroll up. Now, let's do the same but for . down scrolling Let's start with the function to scroll to the bottom of the page. I bet you can guess how it is going to look like. { scroll.scrollToBottom(); } // on-screen-scrolling.component.jsx ( ) function scrollToBottom Really intuitive, don't you think? Let's move on to the pixel specific scrolling functions. These are also pretty intuitive, these are going to be exactly as the ones we used before but with positive values instead. { scroll.scrollMore( ); } // on-screen-scrolling.component.jsx ( ) function scrollMoreDown300 300 { scroll.scrollMore( ); } // on-screen-scrolling.component.jsx ( ) function scrollMoreDown100 100 It makes sense, doesn't it? Now let put these functions to work. We will add them to our tags using an handler, as I mentioned earlier. <button> onClick As you might already know, we need to use curly brackets to pass the functions inside our tag's properties, basic JSX syntax. <OnScreenScrollingStyled> <div> <button onClick={scrollMoreUp100}>Scroll Up 100px</button> </div> <div> <button onClick={scrollToTop}>Scroll to Top</button> </div> <div> <button onClick={scrollMoreUp300}>Scroll Up 300px</button> </div> <div className= > <button onClick={scrollMoreDown100}>Scroll Down 100px</button> <div> < button> < OnScreenScrollingStyled> // on-screen-scrolling.component.jsx < = > div className "top button-row" </ > div "bottom button-row" < > div </ > div Scroll to Bottom < = > button onClick {scrollToBottom} </ > button /div> <div> <button onClick={scrollMoreDown300}>Scroll Down 300px</ </ > div /div> </ There is not a lot to explain here, we just added the handler inside each button and passed the function that we want them to call. onClick This is how your file should look by now: React ; styled ; { animateScroll scroll } ; OnScreenScrollingStyled = styled.div ; { { scroll.scrollToTop(); } { scroll.scrollMore( ); } { scroll.scrollMore( ); } { scroll.scrollToBottom(); } { scroll.scrollMore( ); } { scroll.scrollMore( ); } ( <div className="top button-row"> <div> <button onClick={scrollMoreUp100}>Scroll Up 100px</button> </div> <div> <button onClick={scrollToTop}>Scroll to Top</button> </div> <div> <button onClick={scrollMoreUp300}>Scroll Up 300px</button> </div> </div> <div className="bottom button-row"> <div> <button onClick={scrollMoreDown100}>Scroll Down 100px</button> </div> <div> <button onClick={scrollToBottom}>Scroll to Bottom</button> </div> <div> <button onClick={scrollMoreDown300}>Scroll Down 300px</button> </div> </div> ); } import from 'react' import from 'styled-components' import as from 'react-scroll' const ` height: 100vh; display: flex; flex-direction: column; justify-content: space-between; .button-row { width: 100vw; display: flex; justify-content: space-between; div { margin: 0 10px; } button { padding: 3px; font-weight: bold; cursor: pointer; } } .bottom { margin-bottom: 115px; } ` export default ( ) function OnScreenScrolling // Scroll up ( ) function scrollToTop ( ) function scrollMoreUp300 -300 ( ) function scrollMoreUp100 -100 // Scroll down ( ) function scrollToBottom ( ) function scrollMoreDown300 300 ( ) function scrollMoreDown100 100 return < > OnScreenScrollingStyled </ > OnScreenScrollingStyled And that's it! We have fully functional scrolling buttons and links. The is a little bit harder than , but it's still straightforward and worth it. animateScroll Link There are more things that we can do with react-scroll. You can find more examples and more complex things that this package is capable of doing In the . I encourage you to experiment with it and find out what it's capable of. BE CREATIVE! GitHub repository Thank you for reading my article. I hope you found it useful, please follow me on and give the repo a star if you enjoyed building it. GitHub “I guess I’ve been working so hard, I forgot what it’s like to be hardly working.” - Michael Scott Catch me on - Twitter | LinkedIn | GitHub
