#4502 scroll to anchor on load

Author: kkartunov

src/shared/components/PolicyPages/index.jsx

@@ -2,10 +2,10 @@
  * PolicyPages component.
  */
 import _ from 'lodash';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PT from 'prop-types';
 import Sticky from 'react-stickynode';
-import { config, Link } from 'topcoder-react-utils';
+import { config, Link, isomorphy } from 'topcoder-react-utils';
 import cn from 'classnames';
 import ContentBlock from 'components/Contentful/ContentBlock';
 import Error404 from 'components/Error404';
@@ -29,6 +29,18 @@ function PolicyPages({
       policies: this === 'policies', legal: this === 'legal',
     });
   }
+  // auto scroll to anchors
+  useEffect(() => {
+    if (isomorphy.isClientSide()) {
+      const { hash } = window.location;
+      setTimeout(() => {
+        const anchor = document.getElementById(hash ? hash.slice(1) : null);
+        if (anchor) {
+          anchor.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' });
+        }
+      }, 5000);
+    }
+  });
 
   let { slug } = match.params;
   const pages = policyData.Policies.concat(policyData.Legal);
@@ -94,10 +106,6 @@ function PolicyPages({
   );
 }
 
-PolicyPages.defaultProps = {
-
-};
-
 PolicyPages.propTypes = {
   match: PT.shape().isRequired,
   policyData: PT.shape().isRequired,

src/shared/components/PolicyPages/styles.scss

@@ -87,6 +87,7 @@
       font-weight: 600;
       padding: 15px;
       border-bottom: 1px solid #e0e0e0;
+      outline: none;
 
       &::before {
         display: inline-block;