How to use the react-scroll.scroller function in react-scroll

} from '../actions/prescriptions';

import {
  openGlossaryModal,
  openRefillModal
} from '../actions/modals';

import Pagination from '../../common/components/Pagination';
import { getScrollOptions } from '../../common/utils/helpers';
import LoadingIndicator from '../../common/components/LoadingIndicator';

import PrescriptionList from '../components/PrescriptionList';
import PrescriptionTable from '../components/PrescriptionTable';

const ScrollElement = Scroll.Element;
const scroller = Scroll.scroller;

class Active extends React.Component {
  constructor(props) {
    super(props);

    const viewPref = sessionStorage.getItem('rxView');

    this.handleSort = this.handleSort.bind(this);
    this.pushAnalyticsEvent = this.pushAnalyticsEvent.bind(this);
    this.handlePageSelect = this.handlePageSelect.bind(this);
    this.formattedSortParam = this.formattedSortParam.bind(this);
    this.scrollToTop = this.scrollToTop.bind(this);

    this.checkWindowSize = _.debounce(() => {
      const toggleDisplayStyle = window.getComputedStyle(this.viewToggle, null).getPropertyValue('display');
      // the viewToggle element is hidden with CSS on the $small breakpoint

import _ from 'lodash/fp'; // eslint-disable-line no-restricted-imports
import classNames from 'classnames';
import Scroll from 'react-scroll';

import {
  toIdSchema,
  getDefaultFormState,
  deepEquals,
} from '@department-of-veterans-affairs/react-jsonschema-form/lib/utils';

import { scrollToFirstError } from '../utilities/ui';
import { setArrayRecordTouched } from '../helpers';
import { errorSchemaIsValid } from '../validation';

const Element = Scroll.Element;
const scroller = Scroll.scroller;

/* Non-review growable table (array) field */
export default class ArrayField extends React.Component {
  constructor(props) {
    super(props);

    // Throw an error if there’s no viewField (should be React component)
    if (typeof this.props.uiSchema['ui:options'].viewField !== 'function') {
      throw new Error(
        `No viewField found in uiSchema for ArrayField ${
          this.props.idSchema.$id
        }.`,
      );
    }

    /*

import PropTypes from 'prop-types';
import React from 'react';
import _ from 'lodash/fp'; // eslint-disable-line no-restricted-imports
import Scroll from 'react-scroll';

import { getDefaultFormState } from '@department-of-veterans-affairs/react-jsonschema-form/lib/utils';

import SchemaForm from '../components/SchemaForm';
import { focusElement } from '../utilities/ui';

const Element = Scroll.Element;
const scroller = Scroll.scroller;

/* Growable table (Array) field on the Review page
 *
 * The idea here is that, because our pattern for growable tables on the review
 * page is that each item can be in review or edit mode, we will treat each item
 * as its own form page and this component will handle the edit/review states and
 * make sure data is properly updated in the Redux store
 */
class ArrayField extends React.Component {
  constructor(props) {
    super(props);
    // In contrast to the normal array field, we don’t want to add an empty item
    // and always show at least one item on the review page
    const arrayData = Array.isArray(props.arrayData) ? props.arrayData : null;
    this.state = {
      items: arrayData || [],

import React from 'react';
import PropTypes from 'prop-types';
import Scroll from 'react-scroll';

import InfoPair from './InfoPair';

import { formatDateParsedZoneShort } from '../../../platform/utilities/date';
import { getScrollOptions } from '../../../platform/utilities/ui';

const scroller = Scroll.scroller;

class EnrollmentPeriod extends React.Component {
  constructor() {
    super();
    this.scrollToEnrollment = this.scrollToEnrollment.bind(this);
    this.toggleHistory = this.toggleHistory.bind(this);
    this.state = { historyExpanded: false };
  }

  scrollToEnrollment() {
    const options = getScrollOptions({
      duration: 500,
      delay: 2,
      smooth: true,
    });
    scroller.scrollTo(this.props.id, options);

import PropTypes from 'prop-types';
import React from 'react';
import Scroll from 'react-scroll';

import { getScrollOptions, scrollAndFocus } from '../../../platform/utilities/ui';
import { getActivePages } from '../../../platform/forms/helpers';

import ProgressButton from '@department-of-veterans-affairs/jean-pants/ProgressButton';

const scroller = Scroll.scroller;

const scrollToTop = () => {
  scroller.scrollTo('topScrollElement', getScrollOptions());
};

const scrollToFirstError = () => {
  setTimeout(() => {
    const errorEl = document.querySelector('.usa-input-error, .input-error-date');
    if (errorEl) {
      scrollAndFocus(errorEl);
    }
  }, 100);
};

export default class NavButtons extends React.Component {
  constructor(props) {

import React from 'react';
import { connect } from 'react-redux';
import Scroll from 'react-scroll';
import moment from 'moment';

import { focusElement } from '../../../../platform/utilities/ui';
import FormFooter from '../../../../platform/forms/components/FormFooter';
import GetFormHelp from '../../components/GetFormHelp';

const scroller = Scroll.scroller;
const scrollToTop = () => {
  scroller.scrollTo('topScrollElement', {
    duration: 500,
    delay: 0,
    smooth: true,
  });
};

class ConfirmationPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isExpanded: false };
  }

  componentDidMount() {
    focusElement('.confirmation-page-title');

import {
  getReviewPageOpenChapters,
  getViewedPages
} from '../state/selectors';
import { getActivePages } from '../../../../platform/forms/helpers';
import {
  closeReviewChapter,
  openReviewChapter,
  setData,
  setEditMode,
  setViewedPages,
  uploadFile
} from '../actions';
import Scroll from 'react-scroll';

const scroller = Scroll.scroller;
class ReviewChapters extends React.Component {

  componentDidMount() {
    const {
      formData,
      pageList
    } = this.props;
    const viewedPages = new Set(getPageKeys(pageList, formData));
    this.props.setViewedPages(viewedPages);
  }

  handleToggleChapter({ name, open, pageKeys }) {
    if (open) {
      this.props.closeReviewChapter(name, pageKeys);
    } else {
      this.props.openReviewChapter(name);

import PropTypes from 'prop-types';
import React from 'react';
import Scroll from 'react-scroll';

import { getActivePages, getScrollOptions, scrollAndFocus } from '../utils/helpers';

import ProgressButton from '../../common/components/form-elements/ProgressButton';

const scroller = Scroll.scroller;

const scrollToTop = () => {
  scroller.scrollTo('topScrollElement', getScrollOptions());
};

const scrollToFirstError = () => {
  setTimeout(() => {
    const errorEl = document.querySelector('.usa-input-error, .input-error-date');
    if (errorEl) {
      scrollAndFocus(errorEl);
    }
  }, 100);
};

export default class NavButtons extends React.Component {
  constructor(props) {

import React from 'react';
import moment from 'moment';
import { connect } from 'react-redux';
import Scroll from 'react-scroll';

import { focusElement } from '../../../../platform/utilities/ui';


const scroller = Scroll.scroller;
const scrollToTop = () => {
  scroller.scrollTo('topScrollElement', {
    duration: 500,
    delay: 0,
    smooth: true,
  });
};

class ConfirmationPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isExpanded: false };
  }

  componentDidMount() {
    focusElement('.confirmation-page-title');

import React from 'react';
import { connect } from 'react-redux';
import Scroll from 'react-scroll';
import moment from 'moment';

import { focusElement } from '../../../../platform/utilities/ui';

const scroller = Scroll.scroller;
const scrollToTop = () => {
  scroller.scrollTo('topScrollElement', {
    duration: 500,
    delay: 0,
    smooth: true,
  });
};

class ConfirmationPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isExpanded: false };
  }

  componentDidMount() {
    focusElement('.confirmation-page-title');