Offsetting A Hash Tag Link To Adjust For Fixed Header When Typing Url In Browser In Js

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

Solution 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 onlyfunctiongotoHash(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: 100px0px;
}
header {
  height: 100px;
  background: yellow;
  border: 1px solid gray;
  position: fixed;
  top: 0;
  width: 100%;
}
div {
  height: 1000px;
}

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