Smooth Scrolling in Action Using React: A Tutorial featured image

Smooth Scrolling in Action Using React: A Tutorial

React is an open-source JavaScript library used for building futuristic website designs and improving user interfaces. Due to its robustness, flexibility, and efficiency, it has outperformed its competing front-end libraries and frameworks. React provides excellent features and stand-out functionalities that facilitate customization and dynamic animation.

In the list of animation collections, smooth scrolling in React helps in increasing web app interactiveness and streamlining animation. Smooth scrolling is a feature that allows users to go to different sections of the page using a navigation bar. That means, rather than pressing on a button and being promptly drawn to a different section of a similar page, the user is directed to a target through a scroll animation.

In this guide, we’ll walk you through the steps of implementing smooth scrolling using React.

Let’s Start!

Prerequisites

To follow along with this tutorial, you’ll need the following:

The Basic Setup: Install react-scroll

In this beginner-friendly guide, we’ll design a simple application using react-scroll. If you are comfortable with the React basics and looking forward to uplevel your knowledge on react-scroll functions, refer to these summarised steps.

First, install react-scroll using the following command:

Next, import the react-scroll package:

After that, insert the <Link /> component that will target a specific section of the app:

Let’s move forward and design a React application with smooth scrolling.

Step 1: Clone and Run the React App

In our guide, we’ll be using the starter React project that includes a navigation bar at the top. There you will see five unique <sections> arranged sequentially.

Currently, the links in the navigation bar are anchor tags. However, we will need to update them shortly to enable smooth scrolling. Follow the React With Smooth Scrolling page to navigate to the project repository. It is important to note that the link is for the start branch. The master branch includes all the completed alterations. On opening the url, you’ll see the repository:

Smooth Scrolling in Action Using React: A Tutorial 1

On the repository page, you will see the Code button in green. PRESS the dropdown arrow:

Smooth Scrolling in Action Using React: A Tutorial 2

On clicking the arrow, you’ll see the HTTP link:

Smooth Scrolling in Action Using React: A Tutorial 3

Now go to your git terminal, and use the following command to clone the project in your local machine:

In the src/Components directory, you will find a Navbar.js file that includes the <Navbar> with nav-items corresponding to five five unique <Section>s arranged sequentially:

Next, navigate to the App.js file in the src directory. There, you will see that the <Navbar> is placed along with the five <Section>s:

By default, every <Section> component will include a title and subtitle.

  • DRY Principle in Action

As we are using dummy text for our tutorial, let’s add a dummyText.js file to save time and reduce repetition. Use the newly created JavaScript file to pass into every <Section> element.

  • Install React

Use the following command to RUN the app:

Running the rpm will start your application in development mode. Go to localhost:3000 and verify the app running on your system:

Smooth Scrolling in Action Using React: A Tutorial 4

Now that our app is running, let’s move ahead and install react-scroll in the next step.

Step 2: Install and Configure React-Scroll

First, you need to visit the package on Node Package Manager to download react-scroll . At the time of writing this guide, we are using the most recent release of react-scroll , 1.8.7. Make sure to get the latest version, if there is an update in the future:

RUN the following command to install react-scroll:

After that, go to the Navbar.js file, and import Link and animateScroll from react-scroll. For simplicity and ease of use, let’s keep animateScroll as scroll:

After that, update the nav-items to use the <Link> component. You will see a lot of properties listed in the <Link> component which is trivial to our tutorial. However, you can explore these properties by checking the documentation page.

Some essential properties that deserve your attention:

  • activeClass – The class in use when an element is active.

  • to – Informs the specified target to scroll to.

    • The to feature is crucial because it directs the component which element to scroll.

  • spy: Points to select the Link when the scroll is at the target position.

  • smooth: Animates the scrolling.

  • offset: Scrolls additional px like padding, for instance.

    • You can also use offset to define an extra amount of scrolling to get to an individual <Section>.

  • duration: Animation scroll time that can be a number or a function.

Here is an illustration of the features that can be used for every <Link> component. The only distinctive thing among them will be the to feature as they all point to different <Section>s:

Consider updating all of the nav-items. After all the items are successfully added, return to the browser and see the live smooth scrolling.

Step 3: Style Active Links

In this step, we’ll be using CSS properties to redesign our code block and make it look stylish. The activeClass feature enables you to outline a class and apply the <Link> component when the to element is active. If the <Link> you are using has the to element view at the top of the page, consider the <Link> as active. Click the <Link> or scroll down the <Section> manually to trigger the <Link>.

Let’s try testing and check out how it works. Open up the Chrome DevTools and inspect the fifth <Link> as highlighted below. Click on the <Link> or manually scroll the <Section> to the lower part of the page, and you will observe the active class getting applied:

As an additional step, create an active class and underline the link. Then, add this small block of CSS in the App.css file in the src directory:

After that, refresh your browser. Scroll around a bit and you will notice the specified <Link> is now underlined:

Step 4: Add More Functions

In addition to the properties used above, there are other functionalities like scrollToTop, scrollToBottom, to name a few, that you can use. You can call these functions directly and manage their actions explicitly. With respect to these functionalities, naturally, the app logo in a navigation bar will take you to the top of the home page.

Using the scrollToTop function, add a click handler to the nav-logo for scrolling the user back to the top of the page:

Using the scrollToTop function, add a click handler to the nav-logo for scrolling the user at the bottom of the page:

Back in the browser, you can now scroll down on the page, click the logo in the navigation bar, and be returned to the upper part of the page.

Conclusion

Smooth scrolling is among those functionalities that can add plenty of visual value to a web app. The react-scroll package can enable you to leverage this feature without the momentous overhead.

As the next step in your learning experience, take a look at more React and JavaScript tutorials that you can find on our blog:

Happy Computing!

About Hark Labs

Software Engineer and enthusiast about new technologies