Reactでscrollアニメーションを実装する
jQueryでアニメーションをさせながスクロール処理を行う時がまぁ〜まぁ〜あります。
$('html, body').animate({ scrollTop:0, 500, 'swing', function(){ console.log("done") } });
で、Reactでスクロールをアニメーションさせたい場合、jQueryのanimateメソッドはないので、当然、jQueryのanimateメソッドを書いても動くはずがない。
なので、別の方法を探さないといけない。
Reactのプログラムにはアニメーションの処理が組み込まれていないので、react-scrollというプログラムを使ってスクロールさせる。
import 'react-app-polyfill/ie11'; import React from 'react'; import ReactDOM from 'react-dom'; import * as Scroll from 'react-scroll'; class Hoge extends React.Component { constructor(props) { super(props); } componentDidMount() { Scroll.animateScroll.scrollToTop(); } render(){ } }
アニメーションをさせながらスクロールさせてwindowのトップに戻りたい場合は、scrollToTopメソッドを使えば実現できる。
特定の場所まで移動させたい場合は、selectorとして移動先のdomにname属性を設定させて、そのname属性の値を指定すれば移動させることができる。
import 'react-app-polyfill/ie11'; import React from 'react'; import ReactDOM from 'react-dom'; import * as Scroll from 'react-scroll'; class Hoge extends React.Component { constructor(props) { super(props); } componentDidMount() { /* <div name="foo"></div>のところまで移動させる */ Scroll.scroller.scrollTo('foo',{ duration: 800, delay: 0, smooth: 'easeInOutQuart' }); } render(){ } }