I have a sample code with one button and 2 images that are shown conditionally. I need to scroll to the top of the content div, where images are shown but it stays in the same position as the previous content.

I tried to separate buttons and content between separate divs but it didn't help. Is there a way to achieve this with only CSS.

Here is the code and working example in codesandbox: https://codesandbox.io/s/upbeat-sutherland-9r0kh?file=/src/styles.css:0-206

The page:

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [isOpen, setIsOpen] = useState(true);

  return (
    <div className="App">
      <div className="buttonContainer">
        <button onClick={() => setIsOpen(!isOpen)}>switch</button>
      </div>
      <div>
        {isOpen ? (
          <img src="https://images.unsplash.com/photo-1574285013029-29296a71930e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=927&q=80" />
        ) : (
          <img src="https://images.unsplash.com/photo-1558064340-601a5c6ac442?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80" />
        )}
      </div>
    </div>
  );
}

CSS:

.App {
  font-family: sans-serif;
  text-align: center;
  display: flex;
  align-items: center;
}

.buttonContainer {
  position: fixed;
  height: 100vh;
}

button {
  position: absolute;
  height: 100px;
}