Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ScrollTo didn't work for me! #73

Open
yunkhngn opened this issue Apr 23, 2022 · 0 comments
Open

ScrollTo didn't work for me! #73

yunkhngn opened this issue Apr 23, 2022 · 0 comments

Comments

@yunkhngn
Copy link

yunkhngn commented Apr 23, 2022

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant