Блог

Я хочу добавить анимацию при прокрутке с помощью React JS. У меня есть навигация следующим образом :

 render(){
  return (
       <ul className="noPadding">
           <li style={{paddingTop: 20}}> <Link to="" onClick={this.handleScroll.bind(this, refs.home)}>Home </Link></li>
           <li style={{paddingTop: 20}}> <Link to="" onClick={this.handleScroll.bind(this, refs.whyUs)}>Kenmerken </Link></li>
           <li style={{paddingTop: 20}}> <Link to="" onClick={this.handleScroll.bind(this, refs.benefits)}>Voordelen </Link></li>
           <li style={{paddingTop: 20}}> <Link to="" onClick={this.handleScroll.bind(this, refs.whoAreWe)}>Wie zijn wij?</Link></li>
           <li style={{paddingTop: 20}}> <Link to="" onClick={this.handleScroll.bind(this, refs.contact)}>Contact </Link></li>
       </ul>
  )
}
  

И функция прокрутки ручки выглядит следующим образом :

  handleScroll(ref, event){
    event.preventDefault();
    let offset = this.props.offsets.offsets[ref];
    window.scrollTo(0, offset);
}
  

Это работает нормально, когда я нажимаю на ссылку, я попадаю в нужный раздел.

Но я хотел бы добавить немного анимации. Я не хочу использовать jquery .

Любые советы о том, как это сделать?