Styjun

Why can't some airports handle heavy aircraft while others do it easily (same runway length)?

Was Robin Hood's point of view ethically sound?

If every star in the universe except the Sun were destroyed, would we die?

Is every sentence we write or utter either true or false?

Owner keeps cutting corners and poaching workers for his other company

What should I do about my non-English publications when applying to a University in an English-speaking country?

Milankovitch Cycle induced climate change

How to descend a few exposed scrambling moves with minimal equipment?

Train between Vienna airport and city center

What's the biggest difference between these two photos?

Why does low tire pressure decrease fuel economy?

A property between "separable" and "second countable"

Do any aircraft carry boats?

RANK used in 'where' returns invalid column, but exists in results set

How can I finish my PhD?

Why is the the worst case for this function O(n*n)

How invisible hand adjusts stock prices if company is listed on multiple exchanges, under multiple currencies, and one of the currencies plunges?

When did computers stop checking memory on boot?

I multiply the source, you (probably) multiply the output!

Isn't that (two voices leaping to C like this) a breaking of the rules of four-part harmony?

Why has M1 grown a lot faster than M3 after the financial crisis?

Is gravity a factor for sustaining fusion?

What is the difference between a translation and a Galilean transformation?

Is there a "right" way to interpret a novel, if not, how do we make sure our novel is interpreted correctly?

How to navigate to a particular div on the same page in ReactJS?

Linking to a specific part of a web pagereact-router vs react-router-dom, when to use one or the other?What does it mean …rest in React JSXHow to create routes from anchor tags from react router without the # in the urlReact router 4 “NOT FOUND” when I type in the URL in browserFocus between router(navigation) links and components by pressing keyboard Tab key using ReactJSReact Router ScrollToTop not working with Material UIHow does React Router recursively create pages?How to add active class to particular section in React/ Preact application without react-router routerReact router click same link more than one times and browser back button

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

I have to navigate to a particular div on the same page in React JS application. For example how it is being done in the following website. When one clicks on < NavLink > the UI scrolls and focuses on the particular div and similarly for other Links on this website.
https://reacttraining.com/react-router/web/api/NavLink/strict-bool

reactjs react-router

share|improve this question

edited Mar 27 at 11:40

Kumar

asked Mar 27 at 11:36

KumarKumar

2766 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  stackoverflow.com/questions/15481911/…
  
  – hellogoodnight
  Mar 27 at 11:39
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I just want the focus to go to the particular div or components when I click on the side menu.
  
  – Kumar
  Mar 27 at 11:39
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  Google for "javascript scroll to specific part of page"
  
  – hellogoodnight
  Mar 27 at 11:40
  

  
  
  
  

add a comment | 

0

I have to navigate to a particular div on the same page in React JS application. For example how it is being done in the following website. When one clicks on < NavLink > the UI scrolls and focuses on the particular div and similarly for other Links on this website.
https://reacttraining.com/react-router/web/api/NavLink/strict-bool

reactjs react-router

share|improve this question

edited Mar 27 at 11:40

Kumar

asked Mar 27 at 11:36

KumarKumar

2766 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  stackoverflow.com/questions/15481911/…
  
  – hellogoodnight
  Mar 27 at 11:39
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I just want the focus to go to the particular div or components when I click on the side menu.
  
  – Kumar
  Mar 27 at 11:39
  

  
  
  
  


• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  Google for "javascript scroll to specific part of page"
  
  – hellogoodnight
  Mar 27 at 11:40
  

  
  
  
  

add a comment | 

I have to navigate to a particular div on the same page in React JS application. For example how it is being done in the following website. When one clicks on < NavLink > the UI scrolls and focuses on the particular div and similarly for other Links on this website.
https://reacttraining.com/react-router/web/api/NavLink/strict-bool

reactjs react-router

share|improve this question

edited Mar 27 at 11:40

Kumar

asked Mar 27 at 11:36

KumarKumar

2766 bronze badges

share|improve this question

edited Mar 27 at 11:40

Kumar

asked Mar 27 at 11:36

KumarKumar

2766 bronze badges

share|improve this question

edited Mar 27 at 11:40

Kumar

asked Mar 27 at 11:36

KumarKumar

2766 bronze badges

asked Mar 27 at 11:36

KumarKumar

2766 bronze badges

asked Mar 27 at 11:36

KumarKumar

2766 bronze badges

1 Answer
1

active

oldest

votes

0

Get the offset of the target element and use window.scrollTo to position it either on top of the page or where ever you want. This would work in chrome/latest browsers. You might want to check for other browser compatibility.

let offsetTop = document.getElementById("yourelement").offsetTop;
window.scrollTo(
 top: offsetTop-100, 
 behavior: "smooth"
);

Program is in codepen https://codepen.io/Divine1/pen/zbQVwR

Update

i have added this logic into a online reactjs project editor and it works.
You can see how this code works https://repl.it/@Divine1/QuietHeartyApplicationstack

Check App.js App.css and the live result.

share|improve this answer

edited Mar 28 at 7:29

answered Mar 27 at 11:42

divinedivine

2,39911 gold badge1313 silver badges2222 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I am afraid that this won't work in reactJS
  
  – Kumar
  Mar 28 at 6:11
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Kumar see my updated answer
  
  – divine
  Mar 28 at 7:29
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/4.0/"u003ecc by-sa 4.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55376257%2fhow-to-navigate-to-a-particular-div-on-the-same-page-in-reactjs%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

Get the offset of the target element and use window.scrollTo to position it either on top of the page or where ever you want. This would work in chrome/latest browsers. You might want to check for other browser compatibility.

let offsetTop = document.getElementById("yourelement").offsetTop;
window.scrollTo(
 top: offsetTop-100, 
 behavior: "smooth"
);

Program is in codepen https://codepen.io/Divine1/pen/zbQVwR

Update

i have added this logic into a online reactjs project editor and it works.
You can see how this code works https://repl.it/@Divine1/QuietHeartyApplicationstack

Check App.js App.css and the live result.

share|improve this answer

edited Mar 28 at 7:29

answered Mar 27 at 11:42

divinedivine

2,39911 gold badge1313 silver badges2222 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I am afraid that this won't work in reactJS
  
  – Kumar
  Mar 28 at 6:11
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Kumar see my updated answer
  
  – divine
  Mar 28 at 7:29
  

  
  
  
  

add a comment | 

0

Get the offset of the target element and use window.scrollTo to position it either on top of the page or where ever you want. This would work in chrome/latest browsers. You might want to check for other browser compatibility.

let offsetTop = document.getElementById("yourelement").offsetTop;
window.scrollTo(
 top: offsetTop-100, 
 behavior: "smooth"
);

Program is in codepen https://codepen.io/Divine1/pen/zbQVwR

Update

i have added this logic into a online reactjs project editor and it works.
You can see how this code works https://repl.it/@Divine1/QuietHeartyApplicationstack

Check App.js App.css and the live result.

share|improve this answer

edited Mar 28 at 7:29

answered Mar 27 at 11:42

divinedivine

2,39911 gold badge1313 silver badges2222 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I am afraid that this won't work in reactJS
  
  – Kumar
  Mar 28 at 6:11
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @Kumar see my updated answer
  
  – divine
  Mar 28 at 7:29
  

  
  
  
  

add a comment | 

Get the offset of the target element and use window.scrollTo to position it either on top of the page or where ever you want. This would work in chrome/latest browsers. You might want to check for other browser compatibility.

let offsetTop = document.getElementById("yourelement").offsetTop;
window.scrollTo(
 top: offsetTop-100, 
 behavior: "smooth"
);

Program is in codepen https://codepen.io/Divine1/pen/zbQVwR

Update

i have added this logic into a online reactjs project editor and it works.
You can see how this code works https://repl.it/@Divine1/QuietHeartyApplicationstack

Check App.js App.css and the live result.

share|improve this answer

edited Mar 28 at 7:29

answered Mar 27 at 11:42

divinedivine

2,39911 gold badge1313 silver badges2222 bronze badges

let offsetTop = document.getElementById("yourelement").offsetTop;
window.scrollTo(
 top: offsetTop-100, 
 behavior: "smooth"
);

share|improve this answer

edited Mar 28 at 7:29

answered Mar 27 at 11:42

divinedivine

2,39911 gold badge1313 silver badges2222 bronze badges

answered Mar 27 at 11:42

divinedivine

2,39911 gold badge1313 silver badges2222 bronze badges

answered Mar 27 at 11:42

divinedivine

2,39911 gold badge1313 silver badges2222 bronze badges