页面从菜单锚点滚动到右页，而不是从直接 link

Question

我正在使用这个免费脚本

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

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

该演示与我的网站存在相同的问题，尽管在我的网站上更糟。

如果您使用菜单，一切正常。 header.

上面有一些 space

但是如果您直接访问 link http://codyhouse.co/demo/faq-template/index.html#payments 而不是从菜单

看起来像这样

如你所见，header"payments"上面没有space。

在我的页面上更糟。它从 "Can I have.." 开始，header 被隐藏。当我直接从 link 访问页面时，无法找到我可以在哪里调整它，而不会影响我从菜单访问该部分时的外观。

当用户点击某个部分时

//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代码：http://codyhouse.co/demo/faq-template/js/main.js

风格：http://codyhouse.co/demo/faq-template/css/style.css

Answer 1

这里似乎有几个问题。对我来说，当滚动事件触发时，一切似乎都会发生。

试试这个：

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

Answer 2

只是快速破解，使用

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

编辑：

很难在 jsfiddle 中对此进行说明，因为它不允许我使用 # 哈希。

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 
}

页面从菜单锚点滚动到右页，而不是从直接 link

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

html

javascript

css

anchor

jquery