---
title: "Discussion on \"Easy smooth scrolling in react\" | Hashnode"
description: "Discussion on \"Easy smooth scrolling in react\". In a single-page web application, you will probably have a navbar allowing the user to go to different sections of the page. So today we are going to see how to build that.\n\nDemo\nhttps://www.loom.com/share/1862dfd99f7249a59913db2c9dd62062\nSetup\nCreat..."
url: "https://hashnode.com/posts/easy-smooth-scrolling-in-react/613e035022b7a41dfe5fe19a"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Easy smooth scrolling in react](https://blog.avneesh.tech/easy-smooth-scrolling-in-react?utm_source=hashnode&utm_medium=feed)

In a single-page web application, you will probably have a navbar allowing the user to go to different sections of the page. So today we are going to see how to build that. Demo https://www.loom.com/share/1862dfd99f7249a59913db2c9dd62062 Setup Creat...

Sep 12, 2021 · 3 min read · blog.avneesh.tech  
Read the article

-   [#reactjs](https://hashnode.com/tag/reactjs)
-   [#javascript](https://hashnode.com/tag/javascript)
-   [#css-animation](https://hashnode.com/tag/css-animation)
-   [#animations](https://hashnode.com/tag/animations)
-   [#css](https://hashnode.com/tag/css)

## Written by

[Avneesh Agarwal](https://hashnode.com/@avneesh0612)

@avneesh0612

  
[View profile](https://hashnode.com/@avneesh0612)

Fullstack web3 developer

16 yo full stack web3 developer building cool shit and teaching others

## Responses 3

Markdown supported · ⌘↵ to post

[Tapas Adhikary](https://hashnode.com/@atapas)

[Sep 13, 2021](https://hashnode.com/posts/easy-smooth-scrolling-in-react/613e035022b7a41dfe5fe19a/comment/613ed7cc22b7a41dfe5ff4bb)

Nice tip. Thanks for sharing [Avneesh Agarwal](https://hashnode.com/@avneesh0612)

[Sep 13, 2021](https://hashnode.com/posts/easy-smooth-scrolling-in-react/613e035022b7a41dfe5fe19a/comment/613ed7cc22b7a41dfe5ff4bb#reply-613eed859d4582045cdb323d)

Thanks 🙌🏻 [Tapas Adhikary](https://hashnode.com/@atapas)

[Simona Winnekes](https://hashnode.com/@winnekes)

[Sep 12, 2021](https://hashnode.com/posts/easy-smooth-scrolling-in-react/613e035022b7a41dfe5fe19a/comment/613e244a1821961e25520abf)

Nice article!

If you want to avoid installing dependencies and only need the simplest smooth scrolling I can recommend the css property [scroll-behaviour](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior).

But judging from the documentation of `react-scroll` you can refine the scrolling, that's pretty nifty!

Edit: iOS support for the css property is a bit different, users need to explicitly enable smooth scrolling

[Avneesh Agarwal](https://hashnode.com/@avneesh0612)

[Sep 12, 2021](https://hashnode.com/posts/easy-smooth-scrolling-in-react/613e035022b7a41dfe5fe19a/comment/613e244a1821961e25520abf#reply-613e279b1821961e25520b23)

Ah yeah, scroll behavior property is also great but as you said as well react scroll library can help improve and customize it.

[James Q Quick](https://hashnode.com/@jamesqquick)

[Sep 12, 2021](https://hashnode.com/posts/easy-smooth-scrolling-in-react/613e035022b7a41dfe5fe19a/comment/613e13431821961e255208a5)

So simple. Nice!

[Avneesh Agarwal](https://hashnode.com/@avneesh0612)

[Sep 12, 2021](https://hashnode.com/posts/easy-smooth-scrolling-in-react/613e035022b7a41dfe5fe19a/comment/613e13431821961e255208a5#reply-613e274122b7a41dfe5fe618)

Thanks, glad you liked it 😁