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>

始终有效：使用逻辑检测第一次滚动：

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>

在url哈希导航完成后修改页面滚动

1 个答案: