0

I'm making a website using react and I want a button to scroll to footer section of my website. I am using react-scroll and it is working. I am also using material ui to style my button using their Button component. This is my code snippet.

<StyledButton>
    <Link
     activeClass="active"
     to="Contact"
     spy={true}
     smooth={true}
     offset={-20}
     duration={900}
    >
     Get In Touch
    </Link>
</StyledButton>

This works but the only issue is it only works when I click on the text in the button. If I click anywhere else in the button(inside the button but not on text), it doesn't scroll to footer section. Any suggestions on how do I do that? Thanks.

shayanmalinda
  • 1,925
  • 3
  • 12
  • 23
Deep Parekh
  • 123
  • 1
  • 7

1 Answers1

0

You should place your Link outside of the button.

<Link 
    activeClass="active"
    to="Contact"
    spy={true}
    smooth={true}
    offset={-20}
    duration={900}
    >
    <StyledButton>
        Get In Touch
    </StyledButton>
 </Link>

This way, your whole button gets 'linked' to the element you provided

David Buzatu
  • 624
  • 8
  • 18
  • I also thought about it but it gives me an error saying: parsing error: unexpected token – Deep Parekh Jul 29 '20 at 09:08
  • That's your whole error? If not, could you post your log when the error occurs? – David Buzatu Jul 29 '20 at 09:11
  • yes, that's the whole error I get. It fails to parse the styledbutton component inside link. – Deep Parekh Jul 29 '20 at 09:19
  • It's not something like `parsing error: unexpected token 'some_character'. expected: 'something'` ? – David Buzatu Jul 29 '20 at 09:20
  • Did you import `Link` as: `Link = Scroll.Link`? I did the same thing and for me it works. Please make sure to paste the whole error – David Buzatu Jul 29 '20 at 09:23
  • I am importing link as import {Link} from 'react-scroll'. Do you want me to import it as import Link as Scroll.Link? from 'react-scroll'? And about the error, I do not get anything like 'some_character expected' after unexpected token. – Deep Parekh Jul 29 '20 at 09:39
  • You should import `Link` as `Link = Scroll.Link` and, before, `import Scroll from 'react-scroll'`. I have always used it like that and had no problems – David Buzatu Jul 29 '20 at 09:53