href包含锚#id的BUG-在跳转到锚之前会在页面顶部停留一瞬间

BUG with href containing Anchor #id - hits top of page for split second before jumping to Anchor

本文关键字：一瞬间 停留 顶部 #id 包含锚 BUG- href      更新时间：2023-09-26

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

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

我投资组合中的详细页面有一个主导航，然后在它下面有一个子导航。如果用户在主导航下方看不见的地方向下滚动，我会使用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中有散列===>请稍候。。。如果没有===>不要等待
；）

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);
}

以完成效果。。。您应该在paddle-nav-item a .click()处理程序中添加一个$("body").animate({"opacity":"0"},200);，该处理程序将在.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);
    });
});

；）

相关文章：