When linking to an internal anchor, top bit hidden underneath header

[pamelafox]

When you use the sticky top bar on a page and link to an ID in that page (page#blah), the top X pixels of that ID'd container will be hidden underneath the top bar. I understand why this happens, and am wondering if there's a recommended way of dealing with it, like using JS to offset on load. (Or if there's perhaps a CSS solution). Thanks!

[mdo]

You can us javascript to offset the scroll, or you adding 40px or more of padding to the top of the element you're linking to down the page.

[pamelafox]

If others find this issue, here's what I'm currently doing:

function detectHash() {
  function maybeScrollToHash() {
    if (window.location.hash && $(window.location.hash).length) {
      var newTop = $(window.location.hash).offset().top - $('.topbar').height();
      $(window).scrollTop(newTop);
    }
  }

  $(window).bind('hashchange', function() {
    maybeScrollToHash();
  });

  maybeScrollToHash();
}

I call that function on document ready, and in one case where I dynamically build a page, I trigger hashchange after building. Probably not the smartest way but seems to work so far.

[baopham]

@pamelafox thanks :)

[d3vkit]

EDIT: I realized today that if you have the link simply as an id, and not an 'a name', the above solution is perfect (except for the navbar class). The below solution is basically if you are using a names.

For anyone else that needs this solution, I had to change some stuff to make it work properly. I am not sure if the navbar used to have a class of topbar, but at least on my page it has a class .navbar. I also found that I wasn't able to get at the actual a name on the page properly without being more specific. This is in coffeescript, but it's pretty straightfoward:

maybe_scroll_to_hash = ->
    if window.location.hash
      # Here I am removing the hash (#) from the location.hash -
      # it won't later grab the object otherwise
      hash_name = window.location.hash.split('#')[1]
      # Here I specify that I want to get by name of my anchor
      section = $("a[name='#{hash_name}']")
      if section.length
        # Changed the .topbar to .navbar
        new_top = section.offset().top - $('.navbar').height()
        $(window).scrollTop(new_top)

[barmstrong]

This seems to work for both id and a name links:

jQuery ->
  maybeScrollToHash()
  setTimeout (-> maybeScrollToHash()), 100

$(window).bind 'hashchange', ->
  maybeScrollToHash()

@maybeScrollToHash = ->
  if window.location.hash
    hash_name = window.location.hash.split('#')[1]
    section = $("a[name='#{hash_name}']")
    section = $("#"+hash_name) if section.length == 0

    if section.length
      new_top = section.offset().top - $('.navbar').height()
      $(window).scrollTop(new_top)

I added the second additional call from the setTimeout since there seemed to be some race condition if you clicked an external link (with a hash) and the browser would sometimes do it's own page jump, before hooking up this function I guess? Not really sure. Still feels hacked together, so if someone has a better solution would love to see it.