Вычитает вертикальное смещение в прокрутку фрагмента документа

Question

У меня есть страница с фиксированным заголовком, и я хочу, чтобы url как http://example.com#foo выделил элемент с id=foo и вычитал высоту заголовка, чтобы этот элемент был виден.

Я попытался следующий, но, по крайней мере, Chrome, этот код выполняется до фрагмента прокрутки документа по умолчанию происходит так, положение прокрутки переписывается:

$(function() { 
    var offset; 
    if (window.location.hash !== "") { 
    offset = $(window.location.hash).offset().top; 
    return $("body").scrollTop(offset - headerHeight); 
    } 
}); 

Вот jsfiddle проблемы http://jsfiddle.net/rk8y7/1/

Answer 1

Мне удалось заставить это работать, изменив id элемента DOM на текущий id + _section, а затем прослушивая событие hashchange, чтобы установить положение прокрутки страницы. Мне также пришлось вызвать hashchange на pageload, чтобы получить его для работы с загрузкой первой страницы.

$(function() { 
    $(window).on('hashchange', function() { 
    var elemId, headerHeight, offset; 
    elemId = window.location.hash + "_section"; 
    if (window.location.hash !== "" && $(elemId).length) { 
     headerHeight = $('header').height(); 
     offset = $(elemId).offset().top; 
     return $("html, body").scrollTop(offset - headerHeight); 
    } 
    }); 
    $(window).trigger('hashchange'); 
}); 

Вот моя скрипка http://jsfiddle.net/sguha095/rk8y7/4/