Offsetting a hash tag link to adjust for fixed header when typing url in browser in JS

Question

I wish to create a page that allows hash tags to jump to certain contents of the page.

e.g.

http://example.com/page1 is a normal page

http://example.com/page1#info will jump to the tag with id #info

This is default browser behaviour so no issue there.

The problem begins when I have a fixed browser header, as I need some extra offset so that the fixed header does not cover up the element.

For internal links on the page this is not an issue as I just use the following code:

var scrollOffset = 175;
$('a.tab-button[href^="#"]').on('click', function(event) {
    var $target = $(targetId);
    console.log($(this).attr('href'));

    if( $target.length ) {
        event.preventDefault();
        window.scrollTo(0, $target.offset().top - scrollOffset);
    }
})

where scrollOffset is the number of pixels I wish to offset it by.

However the issue lies when typing the url in the browser it self and clicking enter (as supposed to clicking a URL anchor tag on the page directly). Although it scrolls to the element correctly; there is no offset, between the browser window and the element, causing it to be hidden under the fixed navigation bar.

Note I am aware of the following technique already:

h2:before { 
  display: block; 
  content: " "; 
  margin-top: -285px; 
  height: 285px; 
  visibility: hidden; 
}

and other CSS tricks in http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/

Therefore please give JS answers only please!!!

Answer 1

The following seems to work. The gotoHash() function is basically the same as your existing code, except it's within a timeout, which makes event.preventDefault() unnecessary. This also solves a problem when the function runs after document ready but before the browser has scrolled to a hash:

location.hash = '#d3';  //used for demonstration purposes only

function gotoHash(id) {
  setTimeout(function() {
    var $target = $(id),
        scrollOffset = 100,
        y = $target.offset().top - scrollOffset;

    if ($target.length) {
      window.scrollTo(0, y);
    }
  });
}

$('a[href^="#"]').on('click', function() {
  gotoHash($(this).attr('href'));
});

$(document).ready(function() {
  gotoHash(location.hash);
});

body {
  font: 12px verdana;
  margin: 100px 0px;
}
header {
  height: 100px;
  background: yellow;
  border: 1px solid gray;
  position: fixed;
  top: 0;
  width: 100%;
}
div {
  height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <a href="#d1">div 1</a>
  <br>
  <a href="#d2">div 2</a>
  <br>
  <a href="#d3">div 3</a>
  <br>
  <a href="#d4">div 4</a>
  <br>
</header>
<div id="d1">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div id="d2">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div id="d3">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>
<div id="d4">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>