Home

Extend

Hashnode Pro
Hashnode for Agents

Resources

The foreword
Hashnode gql skill

Buildful - AI coding agent that delivers frontier-level results at a fraction of the cost Bug0 - The AI-native e2e QA regression testing Hackathons Changelog Brand @hashnode on X Hashnode on LinkedIn Support - hello+support@hashnode.com Code of Conduct Terms Privacy Sitemap

Sign in

Search Hashnode

Search posts, tags, users, and pages

Discussion on "Easy smooth scrolling in react" | Hashnode

Discussion

Avneesh Agarwal

Fullstack web3 developer

Sep 12, 2021

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. Demo https://www.loom.com/share/1862dfd99f7249a59913db2c9dd62062 Setup Creat...

blog.avneesh.tech3 min read

#reactjs #javascript #css-animation #animations #css

Responses3

Markdown supported · ⌘↵ to post

Tapas Adhikary

Educator @tapaScript | Founder CreoWis & ReactPlay - Writer - YouTuber - Open Source

Nice tip. Thanks for sharing Avneesh Agarwal

Thanks 🙌🏻 Tapas Adhikary

Avneesh Agarwal

Fullstack web3 developer

Simona Winnekes

making cute things

Nice article!

If you want to avoid installing dependencies and only need the simplest smooth scrolling I can recommend the css property scroll-behaviour.

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

Fullstack web3 developer

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

Developer. Speaker. Teacher.

So simple. Nice!

Avneesh Agarwal

Fullstack web3 developer

Thanks, glad you liked it 😁