I can't make actions before scroll ?

[nartydev]

hi,

I built a page with the AnchorLink module, i would like to know how i can make actions before scroll ?

For example :

<AnchorLink
  offset="50"
  href={`#${job.toLowerCase()}`}
  key={index}
  className="none-href"
>
  <div
    onClick={() => toggleSection(job)}
    className={
      hoverCategory === job
        ? 'content-list-departments__box active'
        : 'content-list-departments__box'
    }
  >
    <div className="content-list-departments__box--title">
      {job}
    </div>
    <div className="content-list-departments__box--count">
      {count[index]} {count[index] === 1 ? 'offre' : 'offres'}
    </div>
  </div>
</AnchorLink>

The AnchorLink is detect before the onClick here and the onClick open accordion item further down the page, if you have a fix for this thanks !

[fembuelita]

@nartydev I had a similar need of closing a modal window and scrolling the anchor element. I solved it by passing the method to close the modal to the component with the AnchorLink components in it. Then, simply add the onClick method to the AnchorLink instead of the child and you can either e.preventDefault() if you don't want to follow the AnchorLink or do your actions without calling e.preventDefault() to allow the inherited behavior from AnchorLink to take effect after you completed your function.

Here's my sample code to show what I mean:

import { Nav, NavItem } from 'reactstrap';
import AnchorLink from 'react-anchor-link-smooth-scroll'

export default class ModalNav extends React.Component {

  constructor(props) {
    super(props);

    this.state = {
      closeModalHandler: this.props.closeModalHandler || (() => {})
    };

    this.closeModalAndFollowLink = this.closeModalAndFollowLink.bind(this);
  }

  closeModalAndFollowLink() {

    // close the modal
    this.state.closeModalHandler();
  }

  render() {

    return (
      <Nav className="modal-nav">
        <NavItem>
          <AnchorLink href="#approach" offset={`90`} onClick={this.closeModalAndFollowLink}>
            <span >Approach</span>
          </AnchorLink>
        </NavItem>
        <NavItem>
          <AnchorLink href="#mission" offset={`90`} onClick={this.closeModalAndFollowLink}>
            Mission
          </AnchorLink>
        </NavItem>
        <NavItem>
          <AnchorLink href="#contact" offset={`90`} onClick={this.closeModalAndFollowLink}>
            Contact
          </AnchorLink>
        </NavItem>
      </Nav>
    );
  }
}

[nartydev]

@elliottpost I have try this. I want the scroll come after my onClick event but i have not found anything yet

[fembuelita]

@nartydev my example should work for you. You can see it in action on mobile on my website, https://ellytronic.media -- check out the links in the mobile menu and notice they close the modal and then it scrolls.

[nartydev]

@elliottpost in your case that work but here you can check https://cotenature.com/recrutement#jobs you can click on "Ventes" and after that click on "Végétal" you can see the position of scroll fail, it's too low, because actions are execute at the same time

[fembuelita]

@nartydev I think it's because your boxes are transitioning, so by the time the anchor link position is calculated its in a different place because of the css transition. To allow for that, you may need to set up your own event handler for when the active class is added and the transition completes to scroll at that point.

[nartydev]

@elliottpost So AnchorLink can not answer my need or I have to modify the component ?

[mauricevancooten]

@nartydev Yes you'd have to modify the component if @elliottpost example doesn't work for you.