Add scroll animation to anchor links on a page

addScrollAnimation.js

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const addScrollAnimation = () => {
  const anchorLinks = document.querySelectorAll('[href*="#"]');
  anchorLinks.forEach((anchorLink) => {
    anchorLink.addEventListener('click', (e) => {
      const href = e.target.getAttribute('href');
      const hashval = href.substring(href.indexOf('#') + 1);

      if (e.target.dataset.targetid) {
        const target = document.querySelector(`#${e.target.dataset.targetid}`);

        target.scrollIntoView({
          behavior: 'smooth',
          block: 'start',
          inline: 'end'
        });

        const history = createBrowserHistory();
        history.push(`#${hashval}`);
        e.preventDefault();
      }
    });
  });
};