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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

我尝试使用以下命令：

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

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

回答：

我相信你的理论是正确的。以下是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>

以上是 完成网址哈希导航后修改页面滚动 的全部内容， 来源链接： utcz.com/qa/262073.html

回到顶部