Javascript, чтобы определить начальную позицию прокрутки на странице?

Question

У меня есть сайт с «фиксированным» заголовком, проблема в том, что он действительно портит ссылки, которые ведут вниз по странице, а-ля "http://mysite.com/#lower_div_on_the_page"

Возможно ли вообще использовать javascript, чтобы сделать что-то вроде

if (URL has #hashtag) {starting scroll position = normal position + (my_header_height)}

Это вообще возможно?

РЕДАКТИРОВАТЬ: Спасибо за все ответы ... очень признателен. Для справки, я определенно использую jQuery ... как бы ясделать это с помощью jQuery?

Answer 1

Конечно, вы можете сделать что-то простое, например:

if(window.location.hash != ''){
   elementOffset = document.getElementById(window.location.hash.substr(1)).offsetTop;
   window.scrollTo(0,elementOffset + my_header_height);
}

Используя jQuery, это, очевидно, будет проще, и вам нужно будет получить дополнительное смещение в зависимости от содержащихся элементов и тому подобного, но это должноначать.

Answer 2

Да, это возможно.

Вот шаги, которые необходимо предпринять:

• Настройка обработчика событий DOM Loaded.Есть несколько способов сделать это, и вот ссылка на веб-страницу, которая объясняет, как это сделать .Также, если вы используете инфраструктуру javascript, такую ​​как jQuery (см. .ready () ) или Prototype.js (см. наблюдайте расширение ), это будет намного проще.

• В функции обработчика событий, загруженных DOM, проанализируйте URL (window.location) для хэштега.

  var hashTag = window.location.href;
hashTag = hashTag.substr(hashTag.indexOf('#') + 1);
// now hashTag contains the portion of the URL after the hash sign

• Затем, если вы узнаете тег привязки, вычислите желаемое местоположение прокрутки на основе местоположения этого элементав дереве DOM или любой другой логике, которую вы хотели бы использовать.Опять же, jQuery (см. .offset () ) или Prototype.js (см. cumulativeScrollOffset ) должен помочь определить правильное смещение для прокрутки до.

• Установить прокрутку страницы.Снова jQuery (см. .scrollTop () ) или Prototype.js (см. scrollTo ) оба имеют расширения, помогающие с этим.

ВотПример jQuery:

$(document).ready(function() {
    var hashTag = window.location.href;
    if(hashTag.indexOf('#') > 0)
    {
        hashTag = hashTag.substr(hashTag.indexOf('#'));

        // now get the element's offset relative to the document
        var offsetTop = $(hashTag).offset().top;

        // and finally, scroll the document to that offset
        $(document).scrollTop(offsetTop);
    }
});