仅将链接锚定到错误的页面位置一次答案

【问题标题】：Anchor links to wrong page location only once仅将链接锚定到错误的页面位置一次
【发布时间】：2019-08-08 23:50:51
【问题描述】：

我正在编写一个个人作品集网站，我的导航链接到页面下方的不同 div。当页面第一次打开时，我的一个导航项链接到 div 的下方太远，但每隔一次，它就可以工作。

这是一个粗略的问题示例；我认为问题出在灰色框（在真实网站中是缩略图的容器）和 javaScript 中。

<!doctype html>
<html>
    <head>
        <title>test</title> 
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/main3.css" type="text/css" media="all"/>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="js/script3.js"></script>

    </head>
    <body>
        <div id="wrapper">

            <nav>
                <a id="nav_design" href="#design_portfolio_cover"> DESIGN </a> 
                <a id="nav_illustration" href="#illustration_portfolio_cover"> ILLUSTRATION </a> 
            </nav>
            <section id="design_portfolio">
                <div id="design_portfolio_cover">
                    <h2>Design--working</h2>
                </div>  
                <section id="design_portfolio_body">
                    <section id="project-d2" class="project">                           
                    </section>  
                    <section id="project-d3" class="project">                           
                    </section>                          
                    <section id="project-d4" class="project">
                        <div id="portfolio_images-d4" class="portfolio_images">
                            <div id="thumbnails-d4" class="thumbnails">     
                            </div> 
                        </div>  
                    </section>  
                </section>   
            </section>
            <section id="illustration_portfolio">
                <div id="illustration_portfolio_cover">
                            <h2>Illustration--not working</h2>
                </div>  
            </section>

            <div id="footer_grey" class="fullscreen_grey"></div> 

        </div><!--    end wrapper -->
    </body>
</html>

还有 CSS...

*{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px; 
    border: 0px;
}

#wrapper{
    width: 100%;
    margin: 0px auto;
}

nav{
    box-sizing: border-box;
    padding: 16px 0px;
    height: 100px;
    background-color: white;
    position: fixed;
}

#design_portfolio_cover{
    padding: 250px 0px;
    background-color: #e2b42b;
    height: 367px;
    width: 100%;
}
#illustration_portfolio_cover{
    padding: 250px 0px;
    background-color: #e2b42b;
    height: 367px;
    width: 100%;
}
#design_portfolio_body{
    width: 100%;
}

.thumbnails{
    width: 805px;
    height: 140px;
    background-color: gray;
}

/* JS CLASSES */

.thumbnails_fixed{
    position: fixed;
    bottom: 0px;
}
.thumbnails_final{
    position: absolute;
    bottom: 0px;
}

/* END JS CLASSES */

#footer_grey{
    width:100%;
    height: 300px;
    float: none;
}

最后是 JavaScript

$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    let project = $('#project-d4').offset().top;
    let project2 = $('#illustration_portfolio').offset().top;
    if (scroll >= project2){
        $('#thumbnails-d4').removeClass('thumbnails_fixed');
        $('#thumbnails-d4').addClass('thumbnails_final');
    }
    if (scroll < project2 && scroll > project){
        $('#thumbnails-d4').addClass('thumbnails_fixed');
        $('#thumbnails-d4').removeClass('thumbnails_final');
    }
});

我希望这不是太多代码...每当我尝试删除空元素时，问题就消失了。

我第一次单击#nav_illustration 时，它会弹出#illustration_portfolio_cover 一点。每隔一段时间，它就会像它应该的那样直接到达它的顶部。所有其他链接第一次工作得很好。我只是无法弄清楚为什么它第一次不起作用。有什么想法吗？

【问题讨论】：

最常见的情况是，当您点击此类链接时页面布局尚未完全构建时 - 例如因为图像仍在加载。很难说这是否只是那些 sn-ps 的问题 - 请提供minimal reproducible example。
正如第一条评论所述，很可能是由于页面未完全加载，而图像很可能是原因。有一种方法可以解决这个css-tricks.com/aspect-ratio-boxes 这个方法可以应用于图像。在现代站点中，可以定义图像尺寸并保留图像空间。这样，无论您何时点击内部链接，它总是会转到正确的位置
我查看了来自@Huangism 的链接（谢谢！）并尝试了一些修复。但是，它要么不起作用，要么使 div 完全消失。不过，我确实继续输入了上面的完整示例，并且在使其最小化的过程中，发现问题似乎出在 JavaScript/CSS 区域，可能在那个“缩略图”div 中。
问题是您正在将 thumbnails-d4 的位置更改为绝对位置，这会将其从正常的内容流中移除，当您这样做时，您将失去 140px 的高度，因为这就是它的高度。当你失去那个高度时，你的卷轴就太低了。我不确定你的项目是如何组合在一起的，所以我不知道你想如何解决这个问题，但这就是问题所在。
@Huangism，非常感谢！实际上我只是想通了，我从一开始就将绝对定位放在所有缩略图上，所以它只是在绝对和固定之间切换。奇迹般有效！如果我能弄清楚如何，我会将您的答案标记为已接受。 :)

标签： html css anchor href

【解决方案1】：

问题是您将 thumbnails-d4 的位置更改为绝对位置，这会将其从正常的内容流中移出，当您这样做时，您将失去 140 像素的高度，因为这就是它的高度。当你失去那个高度时，你的卷轴就太低了。我不确定你的项目是如何组合在一起的，所以我不知道你想如何解决这个问题，但这就是问题所在。

如果符合您的需要，您可以从一开始就将拇指绝对定位，或者您需要一个占位符来保持该空间或从滚动位置减去 140。

【讨论】：