Page isn`t scrolled if user goes by link with position key

- fixed scroll to top with anchor

src/cms/ui/DocumentationPage.tsx

@@ -11,7 +11,7 @@ import ADoc from 'model/cms/ADoc';
 import PageLayout from 'ui/layout/PageLayout';
 import ContentHeader from 'ui/common/heading/ContentHeader';
 import PageTitle from 'ui/common/PageTitle';
-import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
+import { checkAnchorInUrl, ScrollToTopOnMount } from 'ui/common/page/scrollers';
 
 import DocumentationSection from './c/DocumentationSection';
 import Grid from '@material-ui/core/Grid';
@@ -48,13 +48,19 @@ class ContentPage extends React.Component<IDocumentationPageProps> {
     }
   }
 
+  public componentDidUpdate(prevProps) {
+    const { documentation, loadingSlug } = this.props;
+    if (!prevProps.documentation && prevProps.loadingSlug && !loadingSlug && documentation) {
+      checkAnchorInUrl();
+    }
+  }
 
   public render() {
     const {documentation, apiUrl} = this.props;
 
     return (
       <PageLayout withFooter>
-        <ScrollToTopOnMount/>
+        <ScrollToTopOnMount withAnchor/>
         { documentation &&
           <Grid container>
             <PageTitle title={ documentation.title }/>

src/descriptorlists/ui/DisplayPage.tsx

@@ -23,7 +23,7 @@ import BackButton from 'ui/common/buttons/BackButton';
 import PageLayout from 'ui/layout/PageLayout';
 import DescriptorListDisplay from './c/DescriptorListDisplay';
 import ErrorMessage from 'ui/common/error/ErrorMessage';
-import { ScrollToTopOnMount } from 'ui/common/page/scrollers';
+import { ScrollToTopOnMount, checkAnchorInUrl } from 'ui/common/page/scrollers';
 
 interface IDescriptorListPageProps extends React.ClassAttributes<any> {
   classes: any;
@@ -64,13 +64,20 @@ class DescriptorListPage extends React.Component<IDescriptorListPageProps, any>
     }
   }
 
+  public componentDidUpdate(prevProps: IDescriptorListPageProps) {
+    const { descriptorList, loading } = this.props;
+    if (!prevProps.descriptorList && prevProps.loading && !loading && descriptorList && !!descriptorList.descriptors.length) {
+      checkAnchorInUrl();
+    }
+  }
+
   public render() {
     const { classes, loading, error, deleteDescriptorList, setDescriptorsToDescriptorList, copyDescriptor, descriptorList, apiUrl, t } = this.props;
     const { approveDescriptorList, rejectDescriptorList, publishDescriptorList, editDescriptorList } = this.props;
 
     return (
       <PageLayout>
-        <ScrollToTopOnMount/>
+        <ScrollToTopOnMount withAnchor/>
         <PageTitle title={ !loading && descriptorList ? `${descriptorList.title} ${descriptorList.versionTag}` : t('common:label.loading', {what: t('descriptorlists.public.p.display.title')}) }/>
         <ContentHeaderWithButton
           title={ !loading ? t('descriptorlists.public.p.display.title') : t('common:label.loading', {what: t('descriptorlists.public.p.display.title')}) }

src/ui/common/page/scrollers.tsx

 import * as React from 'react';
 
+
+interface IScrollToTopOnMountProps extends React.ClassAttributes<any> {
+  withAnchor?: boolean;
+}
+
 // Nicked from
 // https://reacttraining.com/react-router/web/guides/scroll-restoration
-export class ScrollToTopOnMount extends React.Component {
+export class ScrollToTopOnMount extends React.Component<IScrollToTopOnMountProps> {
   public componentDidMount() {
     if (window) {
+      const {withAnchor} = this.props;
+      if (withAnchor) {
+        return checkAnchorInUrl();
+      }
+
       window.scrollTo(0, 0);
     }
   }
@@ -13,3 +23,16 @@ export class ScrollToTopOnMount extends React.Component {
     return null;
   }
 }
+
+export const checkAnchorInUrl = () => {
+  if (typeof window !== 'undefined') {
+    const id = window.location.hash.substr(1);
+    if (id) {
+      const anchor = document.getElementById(id);
+
+      if (anchor) {
+        anchor.scrollIntoView();
+      }
+    }
+  }
+}