完成网址哈希导航后修改页面滚动

Question

如果在网址中传递了哈希ID，我需要在网页加载后解释导航栏大小。 example.com#id-of-some-element

我尝试使用以下命令：

$(document).ready(function(){ 
    if(window.location.hash){ 
     $(window).scrollTop($(window).scrollTop() - 80); 
    } 
}); 

然而$(window).scrollTop()在这种情况下，始终返回0。
这导致我认为.ready在导航到哈希ID之前已经启动。

Answer 1

我相信你的理论是正确的。以下是3个示例，其中一个使用$(document).ready()，一个使用$(window).load()，另一个使用逻辑在第一次滚动后进行调整（但不是后续滚动）。

所有3显示预期的$(window).scrollTop()值，但$(document).ready()总是出现在哈希位置而不是预期的移位位置。 $(window).load()在某些时候会出现预期的80px调整，但它不一致。第三种选择使用应该始终工作的逻辑，虽然它肯定有点笨重。可能有更好的解决方案，但我希望这有助于！

尝试展开每个代码段并重复点击“运行代码段”以查看多次测试运行的结果。

永远不会奏效：使用$(document).ready()：

if (!window.location.hash) { 
 
    window.location = window.location + "#id-of-some-element"; 
 
} 
 

 
$(document).ready(function() { 
 
    console.log($(window).scrollTop()); 
 
    if (window.location.hash) { 
 
    $(window).scrollTop($(window).scrollTop() - 80); 
 
    console.log($(window).scrollTop()); 
 
    } 
 
});

.tall-div { 
 
    height: 1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tall-div">DIV 1</div> 
 
<div id="id-of-some-element">Some Element</div> 
 
<div class="tall-div">DIV 2</div>

有时工作：使用$(window).load()：

if (!window.location.hash) { 
 
    window.location = window.location + "#id-of-some-element"; 
 
} 
 

 
$(window).load(function() { 
 
    console.log($(window).scrollTop()); 
 
    if (window.location.hash) { 
 
    $(window).scrollTop($(window).scrollTop() - 80); 
 
    console.log($(window).scrollTop()); 
 
    } 
 
});

.tall-div { 
 
    height: 1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tall-div">DIV 1</div> 
 
<div id="id-of-some-element">Some Element</div> 
 
<div class="tall-div">DIV 2</div>

一lways作品：用逻辑来检测第一滚动：

if (!window.location.hash) { 
 
    window.location = window.location + "#id-of-some-element"; 
 
} 
 

 
var loading = true; 
 
$(window).scroll(function(event) { 
 
    if (loading) { 
 
    console.log($(window).scrollTop()); 
 
    if (window.location.hash) { 
 
     $(window).scrollTop($(window).scrollTop() - 80); 
 
     console.log($(window).scrollTop()); 
 
    } 
 
    loading = false; 
 
    } 
 
});

.tall-div { 
 
    height: 1000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="tall-div">DIV 1</div> 
 
<div id="id-of-some-element">Some Element</div> 
 
<div class="tall-div">DIV 2</div>