javascript - 页面从菜单 anchor 滚动到右页,但不是从直接链接

标签 javascript jquery html css anchor

我正在使用这个免费脚本

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

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

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

如果您使用菜单,一切正常。标题上方有一些空间。

enter image description here

但是如果你访问直接链接http://codyhouse.co/demo/faq-template/index.html#payments不是来自菜单

看起来像这样

enter image description here

如您所见,标题“付款”上方没有空格。

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

当用户点击一个部分时

//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

最佳答案

只是一个快速的破解,使用

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 
}

关于javascript - 页面从菜单 anchor 滚动到右页,但不是从直接链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31248213/

相关文章:

javascript - 'console' 在 shell 中未通过使用 webpack 和 node.js 进行定义

javascript - 搜索然后替换为 JavaScript 中的不同步骤

javascript - 检查元素是否为 div

html - 在 div 的右上角放置一个图像/图标

html - 给表格添加滚动条

javascript - Vue.Draggable 适用于具有多个 tbody 的表格

javascript - Python 到 Javascript - Numpy 问题

javascript - DateTimePicker js文件在azure中受到惩罚后不起作用

jquery - 如何在点击链接下放置一个div?

Javascript 函数重写 prev 函数