How to scroll to a component when the user clicks on any link or button
Hello, Guys I have a homepage where there are some components and each component is having full-screen height. let's say in the hero component on the homepage there is a navbar component where I have some links. What I want is that whenever the user clicks on any link it should scroll to the component associated with it.
39 Replies
Add an id to each element you want to navigate to. You can then link to those elements using the fragment part of the url (
example.com/home#contact)
To enable scrolling use scroll-behavior: smooth;use intersection observer api
or use react-scroll library
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
Intersection Observer API - Web APIs | MDN
The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
you can spy on the link whenever they are under viewport and change the style
You don't need JS for that
yes except when you also want to style the link whenver user scroll to it
The example on the
scroll-behavior should cover all you need https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior#examples
That wasn't the question. Also if you want to style the element which got navigated to you can use the :target pseudo class https://developer.mozilla.org/en-US/docs/Web/CSS/:targetoh yeah idk that , I used intersection api in my project
this one is better
I tried the scroll-library but it throw error saying didn't find the target id which is true as the component is not in the dom initially when I scroll down that only it comes to dom. I am bit new with react
I do not want to style just need the scrolling behavior
If you only want scrolling you just need
scroll-behavior: smooth;. Check out the example i sent youno sir, I mean it should scroll when user clicks on link
Exactly that's what that does
wait I will show the code of the navbar with scroll library
I use link component in navbar of react scroll and assign the id
and put the same id to the component like this <Who id='who' />
this is the thing I get
You don't need react or js to do this. If you don't look at the multiple docs pages and examples I sent you, I can't help you
I am looking
only
as per docs I have to provide hreff to the link right
and id to the component
I am using material ui typography component
<nav>
<a href="#page-1">1</a>
<a href="#page-2">2</a>
<a href="#page-3">3</a>
</nav>
<div class="scroll-container">
<div class="scroll-page" id="page-1">1</div>
<div class="scroll-page" id="page-2">2</div>
<div class="scroll-page" id="page-3">3</div>
</div> this example is taking me to the different page which doesnt exists
I tried this way
Are you using react to make a single page application?
Yes I am using react sir
Its for my portfolio
https://nehat-dev.vercel.app
Check this sir
When I scroll up its scrolling 100% screen height.
I can imagine that this'll cause issues on SPAs as a link would move you from the current page. Didn't know you're making a spa
@nehat.dev if a simple
#page-x takes you to another page, then the React Router is configured to use the (legacy) "hash history". Modify the setting so it uses "browser history"
https://v5.reactrouter.com/web/api/historyIn your highest priority component wrap it in a div or smtng with an id
Then put a tags with those IDs in your navbar component and add scroll-beheviour smooth
I am not using any routing just a single-page application sir
Do you mean I should then wrap the ‘who’ component inside a div and assign id to that div?
But the component didn't render initially, its only render when the user scrollss down. That how come it get the id when there is no data mounted
Yes sir.
If talking about myself , I used Intersection Observer API for my portfolio .
@nehat.dev Do you want to achieve the smooth scroll on single page?
Yes sir right
If users can "navigate" from one state of the page to another and back, showing different contents, that's part of routing, too.
it does not imply or mean to navigate to another "physical" page, which is why this is called "Single page application" but to represent a specific set of contents (like pages) via their unique URL so users and search engines can get there via bookmarks etc. and have a consistent experience.
https://nehat-dev.vercel.app here is my site.
I am not gonna give you the answer right away but read through
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
All You have to do is observer your section with
.isIntersecting
Like I do in https://tjsm.netlify.app/Yes sir make sense sorry I didn’t understand nicely
Make the footer sticky so you can see the scrolling highlight
Thank you sir. Will check and try to implement
I have not created yet sir, still building
I want exactly the same thing sir what you used
after googling I found that css snap type is causing the issue with react scroll libraryr. but didnt get the solution. But I manage to use scroll on top method
const ScrollToTop = ()=>{ wrapperRef.current.scrollTo({ top: 0, behavior: "smooth", }); }
with this code
@hmm_69
this wrapper referrance i put to the main container where i use snap type
there is no need of useRef hook and other stuff , just subscibie the section to observer api
Can you please share any article or guide or any video to get some ides
Web Dev Simplified
YouTube
Learn Intersection Observer In 15 Minutes
Intersection Observer is an amazing tool in JavaScript that allows you to easily and efficiently do pretty much anything based on the visibility of elements. This is perfect for scroll animations, lazy loading images, infinite scroll, and much more. Also, Intersection Observer is incredibly performant and flexible which makes it by far the best ...
GitHub
dev_portfolio/Navitems.tsx at main · Tribhuwan-Joshi/dev_portfolio
My personal portfolio . Contribute to Tribhuwan-Joshi/dev_portfolio development by creating an account on GitHub.
or see how I implement it