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

Using anchor tags in react-router 4 #5865

Closed
sschenk opened this issue Jan 12, 2018 · 1 comment
Closed

Using anchor tags in react-router 4 #5865

sschenk opened this issue Jan 12, 2018 · 1 comment

Comments

@sschenk
Copy link

sschenk commented Jan 12, 2018

I want the page to scroll down to my anchor tags when a user navigates to it through an anchor link.

I'm using react-router 4 and I've defined things as follows:

navbar:

export default (props) => {
  const { 
    updateModal,
    updateRoute,
  } = props
  return(
    <Navbar fluid collapseOnSelect>
      <Nav>
        <NavDropdown eventKey="4" title="Solutions" id="nav-dropdown" noCaret>
          <MenuItem eventKey="4.1">
             <Link to='/solution#ipos'>TESTING ANCHOR</Link>
          </MenuItem>

...
some route:

export default class extends Component {
  constructor() {
    super()
    this.state = {
      isLoading: true
    }
  }
  render() {
    return (
      <Grid className='solutions' fluid>
       <Row className='someClass'>
        <div>
          <h2><a href='ipos' id='ipos'>Ipos morna santos paros</a></h2>
      ...

I can see the hash anchor tag in the url and in my redux store when I click on the anchor link in the navebar, and it indeed navigates to the new route, but it doesn't scroll down to the tag itself.

Is it up to me to create the scroll function or how is it supposed to work exactly?

@sschenk
Copy link
Author

sschenk commented Jan 12, 2018

Just saw this don't know how I've missed it before

#394 (comment)

@sschenk sschenk closed this as completed Jan 12, 2018
@lock lock bot locked as resolved and limited conversation to collaborators Jan 18, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant