proksh / atomize

Design System for developers build on styled-components & React JS.
https://atomizecode.com/
Other
1.74k stars 340 forks source link

ScrollTo didn't work for me! #73

Open yunkhngn opened 2 years ago

yunkhngn commented 2 years ago

I think the scrollTo button didn't work for me. You can check why it doesn't work on my site: Example

image

This is how I wrote the component, same as the documentation code you have given:

import React from 'react'
import {Button, Div, scrollTo} from 'atomize'
import Notfound from '../Notfound/Notfound'

const Playground = () => {
  // if (process.env.NODE_ENV === 'production') {

  //   return <Notfound/> 
  // }
  // else{
  return (
    <Div>
      <Div h="100vh" bg="blue100" d="flex" align="center" justify="center">
        <Button
            id="blueButton"
            onClick={() => scrollTo("#yellowButton")}
            bg="info700"
          >
            Scroll To Yellow Button
        </Button>
      </Div>
      <Div h="100vh" bg="blue100" d="flex" align="center" justify="center">
        <Button
            id="yellowButton"
            onClick={() => scrollTo("#blueButton", 100, 0, 800)}
            bg="warning700"
          >
            Scroll To Blue Button
        </Button>
      </Div>
    </Div>
  )
}
// }
export default Playground

I'm using react-router-dom, and routed components, so I think it's the leading cause. I want to make a scroll to the top button. I tried using window.scrollTop(0,0) but still not working (the button does nothing, no error caused).

Thanks for your help. Glad to get a response from you.