Прокрутите до привязки onload с смещением заголовка

Question

Я использую якоря на своем веб-сайте с несколькими div s. Когда мои загрузки страницы, у меня есть # в конце моего URL, как это:

http://www.website.com/projects#third

У меня также есть фиксированный заголовок, с 100px высотой.

Я использую плагин scrollto.

Что я пытаюсь сделать, так это то, что когда мои страницы загружают его, он прокручивается до #div URL-адреса и со смещением высоты заголовка.

Вот что я пытался использовать jQuery, но он не работает.

$(window).load(function() { 

    var hashVal = window.location.hash; 
    var headerheight = $("header").height(); 
    $('body').scrollTo(hashVal, { duration: 'slow', offsetTop: headerheight}); 

}); 

Не могу понять, что я делаю неправильно.

Answer 1

Попробуйте следующее:

$(document).ready(function(){ 
    $('body').scrollTop($('body').scrollTop() + $("header").height()); 
}); 

Answer 2

Следующая jsFiddle работает отлично: http://jsfiddle.net/gp5kev0k/2/

$(window).load(function(){ 
    var hashVal = "#scrollto";//cannot test this in jsfiddle 
    var headerheight = $("#header").height(); 
    console.log(hashVal) 
    console.log(headerheight) 
    $('body').scrollTo(hashVal,{duration:'slow', offsetTop : headerheight}); 
}); 

Отличия:
Я использую div с id=header, вероятно, вы также сделать это, но с использованием $("header").height(); вы вычисляете высоту <header></header> (если у вас есть такой элемент, это нормально, хотя ..)

Я установил hashval в статическую строку, потому что window.location.hash не работает в jsFiddle. Добавьте несколько команд console.log, чтобы увидеть, работают ли эти фрагменты в вашем коде.