Scroll to Element on Page Load about react-scroll HOT 10 CLOSED

good point, but doesn't react-router repaint the view when you navigate to a new URL?

Or are you keeping all the sections under /mypage and using "section1" as param?

This feature should be added, gotta figure out a nice way to integrate it with react-router.

from react-scroll.

All sections are under /mypage and section1 is a param. I have this currently working with react-router, just not the "scroll to section on page load" portion.

from react-scroll.

Here's what the route looks like.

<Route name='mypage' path='/mypage/?/:section?' handler={MyPage}/>

from react-scroll.

@fisshy so what's the final api here? How do you scroll by id pragmatically?

from react-scroll.

@deezahyn This is how we are doing it.

import React from 'react';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';

import { scroller, scrollSpy } from 'react-scroll';

class ComponentsPage extends React.Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    let params = this.context.router.getCurrentParams();
    if (params.section && params.section.length > 0) {
      scroller.scrollTo(params.section, false, 0, -65);
    }
  }

  componentWillUnmount() {
    scrollSpy.unmount();
    scroller.unmount();
  }

  render() {
    return (
      <Row>
        <Col md={10}>
          <div>Components here</div>
        </Col>
      </Row>
    );
  }
}

ComponentsPage.contextTypes = {
  router: React.PropTypes.func.isRequired
};

export default ComponentsPage;

from react-scroll.

what's the param section? is that a string? or DOM? Say I can access the actual dom via refs. this.refs.myBox. How would I go about scrolling to that parameter?

from react-scroll.

@deezahyn Have a look at the example. You use <Element name='myLink'> and <Link to='myLink'>. The Link scrolls to the item defined by Element when it is clicked. If you want to manually do it yourself, outside of the Link (such as on Page Load, which is what the issue is you are posting on), you can use the scroller as I posted above. You still use Element to define the sections that can be scrolled to. You don't work with DOM elements directly.

from react-scroll.

This is how Element knows what to scroll to.

from react-scroll.

it says target Element not found

from react-scroll.

@deezahyn Please open a new issue and post the code you're having trouble with.

from react-scroll.