I want to get the scroll position and move it

Question

I'm using react and Typescript.
When I press a Button, I want to go to the next button.
For example, when I press a Button in the blue Box component, I want it to go to the red Box component below. Also, I don't want to use the a tag.I've been using codesandbox to implement this, but I can't figure out how to move the scrolling position.
https://codesandbox.io/s/eloquent-dust-ikdv1?file=/src/index.tsx

score 3 · Accepted Answer · answered Apr 21 '21 at 05:25

3

Just use anchors for jumping:

  <Box height="400px" background="blue.100">
    <a href="#red"><Button></Button></a>
  </Box>
  <Box height="400px" background="red.100" id="red">
    <Button></Button>
  </Box>

And if you want smooth scrolling (proudly stolen from @Joseph Silber's answer):

  const onClick = (e: any) => {
    document.querySelector(e).scrollIntoView({
      behavior: "smooth"
    });
  };
  return (
    <Box>
      <Box height="400px" background="blue.100">
        <Button onClick={(e) => onClick("#red")}></Button>
      </Box>
      <Box height="400px" background="red.100" id="red">
        <Button></Button>
  </Box>

answered Apr 21 '21 at 05:25

maio290

6,440
1
21
38

I don't want to use a tag because it will change the URL, and I want to move the scroll position down. – ryuma Apr 21 '21 at 05:32
The second method doesn't modify the URL at all. But good job on actually not even trying out an answer but rather directly denying it. ;) – maio290 Apr 21 '21 at 05:35
An error occurred when I changed the argument (e:any) of onClick to (e:string). Is there a solution? – ryuma Apr 21 '21 at 06:54
error method) ParentNode.querySelector(selectors: string): Element | null (+2 overloads) Returns the first element that is a descendant of node that matches selectors. Object is possibly 'null'.ts(2531) – ryuma Apr 21 '21 at 06:54
If the problem really is the changed type, just leave it on any. Have you modified the `ids` and `onClick` events on the other elements accordingly? Your sandbox unfortunately isn't reachable any longer. – maio290 Apr 21 '21 at 09:56
@maio290 Why using DOM? This can be done with just href="#red". And smooth behavior can be added by CSS. Kind of confused why will we need onClick handler – Yash Joshi Apr 21 '21 at 11:23
Please, we are not going to argue because I used a wrapping anchor for a button, are we? I know that it's not valid HTML5, but regardless of that, it still works unless we aren't in a form, which isn't the case here. Other than that, I was just modifying OP's code which intended to use the `onClick` event for it. Also, OP stated that he doesn't want the jump mark to appear within the URL. Many paths lead to the desired result - I just showed some of them, no need to act hurt. – maio290 Apr 21 '21 at 11:51

score 1 · Answer 2 · answered Apr 21 '21 at 05:22

1

Maybe you can use id but not sure what you are trying to achieve. Try this:

 <Box height="400px" background="blue.100">
        <Button as="a" href="#red"></Button>
      </Box>
      <Box height="400px" background="red.100">
        <Button id="red"></Button>
      </Box>

In this way you wont need to maintain ref.

answered Apr 21 '21 at 05:22

Yash Joshi

2,586
1
9
18

@ryuma you should probably add this in your question body but since only need to scroll down it does what you expect. – Yash Joshi Apr 21 '21 at 11:25

I want to get the scroll position and move it

2 Answers2