HTTP导致导航栏出错

Question

我正在托管my personal website on github，并且我正在使用Twitter推文中的导航栏来构建侧边栏：

我想要完成的是：当用户点击某个部分（例如“教育”）时，该页面将直接跳到该部分，以便用户不必向下滚动。

问题是：当我使用HTTP访问我的网页并点击任何部分时，页面跳转不会发生。但是，如果我使用HTTPS，问题就解决了。

我尝试在地址末尾添加ID以强制导航到教育部分，如下所示：http://huyennguyen2302.github.io/#education并且它可以正常工作。

我不确定这里发生了什么。任何帮助将不胜感激。谢谢！

Answer 1

我不确定为什么这样做不起作用，似乎无法让它正常工作。但是，您可以使用jQuery实现相同的效果。将您的链接更改为

<a class="ui-link" id="educationButton"  href="#"></a>

然后在你的脚本部分添加

$("#educationButton").click(function() {
        scrollTop: $("#education").offset().top
    };
});

使用jQuery，您可以获得比H​​TML更多的可能性，例如为滚动设置动画

$("#educationButton").click(function() {
    $('html, body').animate({
        scrollTop: $("#education").offset().top
    }, 2000);
});

等。希望这有帮助

编辑：忘记提及第二种方法，如果这是您的最终主机并且您无意移动，则可以通过强制安全连接来更轻松地修复它。只需更改您的

即可

<a class="ui-link" href="#education">

到

<a class="ui-link" href="https://huyennguyen2302.github.io/#education">

这也可以。