页面加载后如何调整滚动位置使被遮挡的目标元素可见？

嗨，我来帮你搞定这个问题～你遇到的问题主要出在两个细节上：条件判断的逻辑错误，还有滚动方向搞反了，咱们一步步来修正：

首先修正你原有的代码 #

你原来的条件判断!window.location.hash == ''写法有问题，因为逻辑非（!）的优先级比相等运算符（==）高，会先把window.location.hash转成布尔值再取反，结果和空字符串比较，这完全不符合你“当URL有hash时执行滚动”的预期。另外，你需要向上滚动54px，但scrollBy({top: 54})是向下滚动，应该用负数才对。

修正后的代码如下：

$(window).on('load', function(){
  // 正确判断URL是否带有hash
  if (window.location.hash !== '') {
    // top设为-54，实现向上滚动54px
    window.scrollBy({top: -54, behavior: 'auto'});
  }
});

更灵活的优化方案（推荐） #

如果你的sticky元素高度以后可能变化，固定写54px不太灵活，咱们可以动态获取sticky元素的高度，然后计算目标元素应该显示的位置：

$(window).on('load', function(){
  const hash = window.location.hash;
  if (hash) {
    // 获取目标元素
    const targetElement = $(hash)[0];
    if (targetElement) {
      // 替换成你实际的sticky元素选择器，比如.sticky-nav
      const stickyElementHeight = $('.sticky-nav').outerHeight();
      // 计算目标元素的顶部位置，减去sticky元素的高度
      const targetScrollTop = targetElement.offsetTop - stickyElementHeight;
      // 滚动到计算好的位置
      window.scrollTo({top: targetScrollTop, behavior: 'auto'});
    }
  }
});

这样不管sticky元素高度怎么变，目标元素都能刚好显示在sticky元素下方，不用手动改数值啦～

备注：内容来源于stack exchange，提问作者provance