diff --git a/src/core_modules/capture-core/components/DataEntry/dataEntryField/internal/DataEntryField.component.tsx b/src/core_modules/capture-core/components/DataEntry/dataEntryField/internal/DataEntryField.component.tsx
index f9b8e9e624..ec5933ad19 100644
--- a/src/core_modules/capture-core/components/DataEntry/dataEntryField/internal/DataEntryField.component.tsx
+++ b/src/core_modules/capture-core/components/DataEntry/dataEntryField/internal/DataEntryField.component.tsx
@@ -19,12 +19,7 @@ class DataEntryFieldPlain extends React.Component<Props> {
 
     goto() {
         if (this.gotoInstance) {
-            this.gotoInstance.scrollIntoView();
-
-            const scrolledY = window.scrollY;
-            if (scrolledY) {
-                window.scroll(0, scrolledY - 48);
-            }
+            this.gotoInstance.scrollIntoView({ block: 'start' });
         }
     }
 
@@ -60,6 +55,7 @@ class DataEntryFieldPlain extends React.Component<Props> {
                 ref={(gotoInstance) => { this.gotoInstance = gotoInstance; }}
                 key={propName}
                 data-test={`dataentry-field-${propName}`}
+                style={{ scrollMarginTop: '80px' }}
             >
                 <Component
                     onBlur={this.handleSet}
diff --git a/src/core_modules/capture-core/components/FormFields/New/HOC/withGotoInterface.tsx b/src/core_modules/capture-core/components/FormFields/New/HOC/withGotoInterface.tsx
index 872b2116c4..778ead9238 100644
--- a/src/core_modules/capture-core/components/FormFields/New/HOC/withGotoInterface.tsx
+++ b/src/core_modules/capture-core/components/FormFields/New/HOC/withGotoInterface.tsx
@@ -1,38 +1,26 @@
-import React, { forwardRef } from 'react';
+import * as React from 'react';
 
 export const withGotoInterface = () =>
-    (InnerComponent: React.ComponentType<any>) => {
+    (InnerComponent: React.ComponentType<any>) =>
         class GotoFieldInterface extends React.Component<any> {
             gotoInstance: any;
 
             goto() {
                 if (this.gotoInstance) {
-                    this.gotoInstance.scrollIntoView();
-
-                    const scrolledY = window.scrollY;
-                    if (scrolledY) {
-                        // TODO: Set the modifier some other way (caused be the fixed header)
-                        window.scroll(0, scrolledY - 48);
-                    }
+                    this.gotoInstance.scrollIntoView({ block: 'start' });
                 }
             }
 
             render() {
-                const { forwardedRef, ...rest } = this.props;
                 return (
                     <div
                         ref={(gotoInstance) => { this.gotoInstance = gotoInstance; }}
+                        style={{ scrollMarginTop: '80px' }}
                     >
                         <InnerComponent
-                            ref={forwardedRef}
-                            {...rest}
+                            {...this.props}
                         />
                     </div>
                 );
             }
-        }
-
-        return forwardRef<any, any>((props, ref) => (
-            <GotoFieldInterface {...props} forwardedRef={ref} />
-        ));
-    };
+        };