Javascript href包含锚定id的BUG-在跳转到锚定之前，会在页面顶部停留一秒钟

我的网站有一个bug，我很难找到一个优雅的解决方案。我打赌有一个简单的方法来解决这个问题。。我只是没看到而已。如果有任何建议，我将不胜感激

例如：

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

问题是，浏览器在跳转到定位标记之前，有25%的时间会在目标页面顶部停留一秒钟，因此您只会在一秒钟内看到顶部导航。它看起来又脏又坏

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

---

任何帮助都将不胜感激

您已经在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中有哈希==>请稍候。。。如果没有==>不要等待
;)

500

ms可能需要调整
;)

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

关于“波状效应”。。。也许

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）在
划桨导航项目a中
。单击（）
处理程序，该处理程序将在
上重定向。动画
回调：

$(".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);
    });
});

)()
 另外，向那些使用移动设备的用户道歉-您将无法访问该页面！我重定向/移动/到一个不同的体验。我真的不喜欢«这不是一个好办法»。。。我有另一个主意，谢谢你。我测试过了，它仍然从顶部开始往下跳，但是没有看到黑色导航条，它只是空白。我认为我们正在从错误的方向解决这个问题。。。移除导航栏，而不是在用户看到任何东西之前进行#定位-可能是CSS转换？哼。。。好的，这里有一个“缺失”的元素效应。。。如果整个
主体
不可见，而只是主导航，那该怎么办？现在检查一下：它可以工作-你根本看不到顶部栏，添加了一个50毫秒的计时器以淡入主体内容。它只是看起来“波涛汹涌”，稍微破坏了体验的凝聚力。我可能需要向左滑动，向右滑动过渡，当箭头用于将整个身体滑离或滑入屏幕时，我看到您完全改变了过渡方法。；）好主意，很好！
$(".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);
    });
});