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

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>