Merge pull request #324 from CMSgov/fix-haslinks

QPPA-10258: fix hashlinks

Author: ckawell-sb

src/app/components/references/data.ts

@@ -28,7 +28,7 @@ export const measurementsTitleAndId = {
   'Proportion': 'proportion-measurements',
   'Non-Proportion': 'non-proportion-measurements',
   'CQM Single-Performance Rate': 'single-performance-rate-measurements',
-  'QCDR Single-Performance Rate': 'single-performance-rate-measurements',
+  'QCDR Single-Performance Rate': 'single-performance-rate-measurements-qcdr',
   'Multi-Performance Rate': 'multi-performance-rate-measurements',
   'Multi-Performance Rate Stratum': 'stratum',
 };

src/app/components/references/measurements.tsx

@@ -11,7 +11,7 @@ const Measurements: React.FC<DocPageProps> = ({dataTestId}: DocPageProps) => {
       <ul>
         {Object.entries(measurementsTitleAndId).map(([title, id], i) =>
           <li key={i}>
-            <LinkToId to={`#${id}`} text={title} />
+            <LinkToId to={`#${id}`} text={title} offset='120' />
           </li>,
         )}
       </ul>

src/shared/link-to-id.tsx

@@ -1,16 +1,12 @@
-import { HTMLAttributes } from 'react';
-
 import { HashLink } from '@xzar90/react-router-hash-link';
 
-export const LinkToId = ({ to, text, offset = '1', attrs }: { to: string, text: string, offset?: string, attrs?: HTMLAttributes<object> }) => {
+export const LinkToId = ({ to, text, offset = '1' }: { to: string, text: string, offset?: string }) => {
   return (
     <HashLink
-      to={!to.includes('#') ? `${to}#${to}` : to}
+      smooth to={!to.includes('#') ? `${to}#${to}` : to}
       scroll={el => {
-        el.scrollIntoView(true);
-        window.scrollBy({ top: -Number(offset), behavior: 'smooth' });
+        window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - Number(offset)  });
       }}
-      {...attrs}
     >
       {text}
     </HashLink>