Question

我目前正在尝试创建一个导航菜单，点击滚动到位于页面下方的div。最初它可以工作，但是当我添加一个CSS过渡来突出显示文本时，jQuery将不再触发点击它时滚动。

$("#about, #about:hover").click(function() {
    $('html,body').animate({
        scrollTop: $("#box1").offset().top},
        'slow');
});

#about ID是导航菜单的一部分，点击后会滚动到#box1。我尝试将悬停状态添加到选择器，将其更改为.trigger而不是.click，但我没有看到简单的解决方案。我已在Chrome，Safari中使用JSFiddle重新创建了该活动。

JQuery是否与转换，悬停状态或我的代码冲突？

编辑它在小提琴示例中工作，但在本地制作时事件仍未发生（所有内容都链接且正确且控制台中没有错误。）

Answer 1

您的JS代码在DOM完全加载之前运行。

将JS放在document.ready();：

中

$(document).ready(function () {
    $("#about, #about:hover").click(function () {
        $('html,body').animate({
            scrollTop: $("#box1").offset().top
        },
            'slow');
    });

    $("#portfolio, #portfolio:hover").click(function () {
        $('html,body').animate({
            scrollTop: $("#box2").offset().top
        },
            'slow');
    });

    $("#social, #social:hover").click(function () {
        $('html,body').animate({
            scrollTop: $("#box3").offset().top
        },
            'slow');
    });

    $("#contact, #contact:hover").click(function () {
        $('html,body').animate({
            scrollTop: $("#box4").offset().top
        },
            'slow');
    });
});

查看更新的JSFiddle

Answer 2

如果你的jQuery链接和/或函数链接在标题中，它就不起作用。

如果js链接朝向你的html末尾，就像关闭正文标记之前一样，它对我有用。

jQuery在悬停状态下不触发事件

2 个答案: