How can I jump to specific parts of a Web page by using the anchor tag?

Question

React uses "#" in the URL so when I write

<a href="#specificAreaId">Click here to scroll to top</a>

it doesn't work as scrolling to the element which has id: specificAreaId. Instead, it navigates to another page. How can I do this?

Answer 1

Create the anchor the way that is specified in Anchors.

Answer 2

You can use react-scrollable-anchor

Install it:

npm install --save react-scrollable-anchor

And import it in your component:

import ScrollableAnchor from 'react-scrollable-anchor'

Then use it like:

<a href='#myScrollSection'>Go to myScrollSection</a>
<ScrollableAnchor id={'myScrollSection'}>
     <div>Hello, World!</div>
</ScrollableAnchor>

You can read more here.

Answer 3

I am going with the assumption that you are using hash history in react-router. Try to use browser history instead.

Also it would be ideal if you create the anchor tags like:

<a href="pageUrl#specificAreaId">Click here to scroll to top</a>

You could also refer this post, regarding a similar issue:

Use anchors with react-router

Answer 4

You can try jQuery's 'animate scrollTop'.

$('html, body').animate({
  scrollTop: $('#specificAreaId').offset().top
}, 800);