CODEWITHSUNDEEP
javascriptreactjsscroll
Michael Johansen
Michael Johansen

Reputation: 5096

What can cause scroll to top?

A page in a React always scrolls to the top on history navigation. I have trouble figuring out what causes the scroll-to-top.

So what else is there that can cause document.documentElement.scrollTop to be set to 0?

Upvotes: 2

Views: 600

Answers (1)

Karthikeyan
Karthikeyan

Reputation: 414

Is there any fallback screen involved in the transition, may be a loading/intermediate frame with minimum height.. You can work on something like mentioned React Router v4 - Keep scrolling position when switching components

function buttonClick() {
    document.getElementById("myDiv").classList.add("reduceHeight");
    setTimeout(()=>document.getElementById("myDiv").classList.remove("reduceHeight"),2000);
  }
#myDiv {
  border: 1px solid black;
  width: 100vw;
  height: 200vh;
  overflow: scroll;
}
#myDiv.reduceHeight {
  width: 80vw;
  height: 90vh;
}
button {
  position: fixed;
  top:100px;
  right:100px;
  z-index:100;
  width:200px;
}
<!DOCTYPE html>
<html>
<body >
<div id="myDiv">
  Scroll and Click the Simulate Button
  
</div>

<button onClick="buttonClick()">Simulate intermediate!</button>
</body>
</html>

Upvotes: 1

Related Questions