Add offset for # links to work around fixed header on desktop

Prevent anchors from putting headers, cite notes, etc behind fixed
header when jumping around. Use js to avoid previous issue of mucked
up highlighting... (T162649)

bug: T181484, T162649
Change-Id: I6bdb450b24df50f39e14bc2b254c6adb6cc7f7d7

resources/main.js

@@ -8,4 +8,24 @@ $( function () {
 	 */
 	$( '#searchInput' ).attr( 'tabindex', $( document ).lastTabIndex() + 1 );
 
+	/**
+	 * Add offset for # links to work around fixed header on desktop
+	 * Apparently can't use CSS solutions due to highlighting of Cite links and similar. (T162649)
+	 *
+	 * Based on https://stackoverflow.com/questions/10732690/#answer-29853395
+	 */
+	function adjustAnchor() {
+		var mobileCutoffWidth = 850,
+			$anchor = $( ':target' ),
+			fixedElementHeight = $( '#mw-header-container' ).outerHeight() + 15;
+
+		if ( $( window ).width() > mobileCutoffWidth && $anchor.length > 0 ) {
+			$( 'html, body' ).stop();
+			window.scrollTo( 0, $anchor.offset().top - fixedElementHeight );
+		}
+	}
+
+	$( window ).on( 'hashchange load', function () {
+		adjustAnchor();
+	} );
 } );