React: Slowly scrolling page when i press button and stop scrolling when i press another button

I'm working on an application that renders articles, books and long texts. The application has 2 buttons, one "start" and "stop" "Start" makes the page scroll slowly, when you press it again, the button icon changes to a faster scroll and so 3 steps so that the user can read the text without using the scroll. When the user clicks on the "stop" button or the page reaches the end, the scrolling stops.

I understand how to change the buttons from the state of the current scroll, but how to make the page scroll and stop it when the button is pressed does not fit in my head.

Please help with this problem. Making the screen move uncontrollably to the desired section is not as difficult as what I described above.

Thank you.

P.S. If the answer is adopted for typescript, I will be even more grateful.

You can use the window.scrollBy() method to scroll the page

I just share sample code which will help for your work.. I'm not sure how to stop the scroll when the scroll reaches to end

    var myInterval = setInterval(()=>onBtnClick('stop'), 1000000);
    const scroll = (speed) => {
        window.scrollBy({
          top: speed,
          left: 0,
          behavior: 'smooth'
        })
    }
  
    const onBtnClick = (type) => {
      switch(type) {
        case 'start1':
          myInterval = setInterval(()=>scroll(10), 100)
          break
        case 'start2':
          myInterval = setInterval(()=>scroll(20), 100)
          break
       case 'stop':
          clearInterval(myInterval)
          break
       case 'reverse':
          myInterval = setInterval(()=>scroll(-10), 100)
          break
      }
    }
  
    onBtnClick("start1") // slow scroll
    onBtnClick("start2") // fast scroll
    onBtnClick("stop") // stop