Reactで指定の要素まで自動スクロールさせる

はじめに

Reactで、ページ上部にスクロールや指定のidやclassまでスクロールさせたいことがあったので、Reactで使えるスクローラー作りました。

react-smooth-scroller

Github: https://github.com/gurimon/react-smooth-scroller

Installation

$ npm i -S react-smooth-scroller

or

$ yarn add react-smooth-scroller

Usage

// ES2015 imports
import rsScroller from 'react-smooth-scroller';

// ES5 require
const rsScroller = require('react-smooth-scroller');

API

rsScroller#scrollToTop(option)

rsScroller.scrollToTop();

// custom
rsScroller.scrollToTop({ easing: 'linear', duration: 1500, frame: 20, revise: 100 });

rsScroller#scrollToTarget(classname, option)

rsScroller.scrollToTarget('hoge');

// custom
rsScroller.scrollToTarget('hoge', { easing: 'linear', duration: 1500, frame: 20, revise: 100 });

rsScroller#scrollReset()

option

|Key|Type|Default|Description|
|---|---|---|---|---|
|easing|string|easeOutQuint|easing|
|duration|number|1000|all time|
|frame|number|13|one frame time|
|revise|number|0|revise pixel|

easing

• linear
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInSine
• easeOutSine
• easeInOutSine
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInCirc
• easeOutCirc
• easeInOutCirc
• easeInElastic
• easeOutElastic
• easeInBack
• easeOutBack
• easeInOutBack
• easeInBounce
• easeOutBounce
• easeInOutBounce

Use with React

import React from 'react';
import rsScroller from 'react-smooth-scroller';

class Test extends Component {
  onScrollTop() {
    rsScroller.scrollToTop();
  }

  onScrollTarget(classname) {
    rsScroller.scrollToTarget(classname);
  }

  render() {
    return (
      <div className="test">
        <h1>react-smooth-scroller</h1>
        <div className="test__desc">
          <p>test</p>
          <a onClick={() => this.onScrollTarget('hoge')} className="btn">button-A</a>
        </div>
        <a onClick={() => this.onScrollTop()} className="btn hoge">button-B</a>
      </div>
    )
  }
});