javascript - 修复了导航栏隐藏网页内容且JS无法正常工作的问题

这是当我按下“ Contacto”按钮时发生的情况



并且应该像这样



现在我正在使用此javascript代码

    $(function(){
    $('a#boton-contacto').on('click',function(e){
        e.preventDefault();
        var strAncla = $(this).attr('href');

        $('body,html').stop(true ,true).animate({
            scrollTop: $(strAncla).offset().top - $('nav').height()
        }, 500);

    });
});

但是它使按钮停止工作，我想知道为什么，怎么了？

您可以访问我的网站并尝试http://genebi.net希望对我有所帮助，谢谢。

最佳答案

jQuery的以下代码：

var strAncla = $(this).attr('href');将strAncla设置为“ http://genebi.net/#contacto”

并且由于“ http://genebi.net/#contacto”不是有效的选择器，因此出现了JavaScript错误，导致代码无法运行。

要解决此问题，请执行以下任一操作：


从以下位置更改元素的url：
<a id="boton-contacto" href="http://genebi.net/#contacto">CONTACTO</a>


到<a id="boton-contacto" href="http://genebi.net/#contacto">CONTACTO</a>

要么：

2：您可以在链接中使用数据属性：

<a id="boton-contacto" href="http://genebi.net/#contacto" data-element="#contacto">CONTACTO</a>

并按如下所示更改您的jQuery：

var strAncla = $(this).attr('data-element');

它会按您的意愿工作。