Page scroll to right page from menu anchor but not from direct link

Question

I'am using this free script

http://codyhouse.co/gem/css-faq-template/

http://codyhouse.co/demo/faq-template/index.html#payments

The demo has the same problem as my website, although it's even worse on my website.

If you use the menu, everything works fine. You have some space above the header.

But if you visit the direct link http://codyhouse.co/demo/faq-template/index.html#payments not from the menu

it looks like this

As you can see, there is no space above the header "payments".

It is even worse on my page. It starts at "Can I have.." and the header is hidden. Can not find where I can adjust this when I visit the page direct from the link without it effects how it looks when I visit the section from the menu.

When user clicks on a section

//select a faq section 
faqsCategories.on('click', function(event){
    event.preventDefault();
    var selectedHref = $(this).attr('href'),
        target= $(selectedHref);
    if( $(window).width() < MqM) {
        faqsContainer.scrollTop(0).addClass('slide-in').children('ul').removeClass('selected').end().children(selectedHref).addClass('selected');
        closeFaqsContainer.addClass('move-left');
        $('body').addClass('overlay');
    } else {
        $('body,html').animate({ 'scrollTop': target.offset().top - 69}, 200); 
    }
});

Javascript code: http://codyhouse.co/demo/faq-template/js/main.js

Style: http://codyhouse.co/demo/faq-template/css/style.css

Answer 1

It's seems there's a couple of problems here. For me it looks like everything happens when a scrolling event fire.

Try this:

$(document).ready(function(){
    $(window).scroll();
})

Answer 2

Just a quick hack, use

if(window.location.hash) { 
    // if url contain '#' 
    // scroll down a few pixle
}

EDIT:

it's hard to demenstrated this in jsfiddle, since it won't let me play with the # hash.

var url = 'http://example.com/test.html#hash';  
//you can get by using window.location.href
var hash = url.split('#')[1];
// this get the 1st hash variable     

if(hash) {
// if hash exist  
    $('html, body').animate({
           scrollTop: "5000px"
     }, 0);
// scroll down a little bit 
}