javascript - 包含 Anchor #id 的 href 的 BUG - 在跳转到 Anchor 之前瞬间点击页面顶部

Question

我的网站有一个错误，我很难找到一个优雅的解决方案。我敢打赌有一种简单的方法可以解决这个问题……我只是没看到。如果有任何建议，我将不胜感激。

示例:http://robbroadwell.com/portfolio/ios-apps/rainylectures/

我投资组合的详细信息页面有一个主导航，然后在其下方有一个子导航。如果用户向下滚动到看不见的主导航下方，我将使用 jQuery 将左/右箭头的 href 附加一个 anchor 标记，以便主导航隐藏在他们导航到的页面上。

问题是大约 25% 的时间浏览器在跳转到 anchor 标记之前先点击顶部的目标页面，然后你只看到顶部导航一秒钟。它看起来有问题而且很糟糕。

想法……我应该使用 CSS 转换来隐藏它吗？我是否应该在 URL 中传递一个值，然后在目标页面上选择它以将主导航设置为显示:无，然后如果浏览器位于窗口顶部并且用户向上滚动，则将其添加回？

如有任何帮助，我们将不胜感激!

Answer 1

您已经在 url 中传递了一个值:#local-nav

我没有测试它......但我认为这可行:

if(location.hash){
    $(".navbar-absolute-top").css("visibility","hidden");
    setTimeout(function(){
        $(".navbar-absolute-top").css("visibility","visible");
    },500);
}

------
根据评论编辑
好吧...

如果在 CSS 中设置不可见会怎样？

.navbar-absolute-top{
    visibility=hidden;
}

然后我们决定何时将其设置为可见。
如果 url 中有哈希 ==> 等待...如果没有 ==> 不要等待!
;)

if(location.hash){
    // Holds on before setting the main nav visible
    setTimeout(function(){
        $(".navbar-absolute-top").css("visibility","visible");
    },500);
}else{
    // Sets the main nav visible right now
    $(".navbar-absolute-top").css("visibility","visible");
}

500可能需要调整毫秒
;)

------
根据评论编辑

关于“断断续续的效果”...也许 animate() 使用 opacity 会产生更平滑的效果:

body{
    opacity=0;
}


if(location.hash){
    // Holds on before setting the main nav visible
    setTimeout(function(){
        $("body").animate({"opacity":1},200);
    },50);
}else{
    // Sets the main nav visible right now
    $("body").animate({"opacity":1},200);
}

完成效果...你应该添加一个$("body").animate({"opacity":"0"},200);在 paddle-nav-item a .click() 处理程序中将重定向到 .animate 回调:

$(".paddle-nav-item a").click(function(e){

    // Hold the click event
    e.preventDefault();
    // Opacity effect
    $("body").animate({"opacity":"0"},200,function(){

        // Callback retreive the href and redirect AFTER the animation has completed
        redirectTo = $(this).attr("href");
        location.assign(redirectTo);
    });
});

;)