handle offset attribute and children

plugins/woocommerce-admin/client/analytics/settings/index.js

@@ -190,8 +190,13 @@ class Settings extends Component {
 						</Button>
 					</div>
 				</div>
-				{ query.import === 'true' ? <ScrollTo /> : '' }
+				{ query.import === 'true' ? (
+					<ScrollTo offset="-56">
 						<HistoricalData createNotice={ createNotice } />
+					</ScrollTo>
+				) : (
+					<HistoricalData createNotice={ createNotice } />
+				) }
 			</Fragment>
 		);
 	}

plugins/woocommerce-admin/packages/components/src/scroll-to/index.js

@@ -3,10 +3,11 @@
  * External dependencies
  */
 import { Component, createRef } from '@wordpress/element';
+import PropTypes from 'prop-types';
 
 class ScrollTo extends Component {
-	constructor() {
-		super();
+	constructor( props ) {
+		super( props );
 		this.scrollTo = this.scrollTo.bind( this );
 	}
 
@@ -15,19 +16,34 @@ class ScrollTo extends Component {
 	}
 
 	scrollTo() {
+		const { offset } = this.props;
 		if ( this.ref.current && this.ref.current.offsetTop ) {
-			window.scrollTo( 0, this.ref.current.offsetTop );
+			window.scrollTo( 0, this.ref.current.offsetTop + parseInt( offset ) );
 		} else {
 			setTimeout( this.scrollTo, 250 );
 		}
 	}
 
 	render() {
+		const { children } = this.props;
 		this.ref = createRef();
 		return (
-			<span ref={ this.ref }></span>
+			<span ref={ this.ref }>
+				{ children }
+			</span>
 		);
 	}
 }
 
+ScrollTo.propTypes = {
+	/**
+	 * The offset from the top of the component.
+	 */
+	offset: PropTypes.string,
+};
+
+ScrollTo.defaultProps = {
+	offset: '0',
+};
+
 export default ScrollTo;