Javascript 页面跳转到定位点后移动屏幕滚动位置？

我在一个网页上有一个菜单，其链接将页面移动到具有相应ID的部分。但是，每个部分的顶部都有一个粘性标题，因此我想稍微滚动一下以进行补偿

我正在尝试确定一种方法，在页面移动到某个部分后，将页面滚动50像素。我尝试在每个链接上执行

.click（）

事件侦听器，但在发出回调后，页面似乎被移动，从而否定了我的滚动尝试

我的代码如下所示：

HTML:

---

有没有一种方法可以监听链接操作完成，然后运行我的滚动代码？

您是否尝试设置超时，但它会产生闪烁效果（无法察觉）

您还可以更改单击事件来处理li项中的所有a标记，如下所示

$('li > a').click(function(){
  setTimeout(function(){  
        var y = $(window).scrollTop(); 
        $(window).scrollTop(y-50); }, 1);
});

以下是您观察到的小提琴样本

：

但是，在发出回调之后，页面似乎被移动了，这否定了我滚动页面的尝试

这是因为附加到锚定标记的事件将在锚定标记默认行为之前执行。 您使用的是id，因此您也可以使用它通过javascript进行滚动。 以下是我试用过的一个示例：

功能手柄点击（e、ScrolleMid）{
e、 预防默认值（）；
scrollTo（0，document.getElementById（scrollElemId.offsetTop+50）；
}

。我有过设置超时的经验，如果某个事件在不同的浏览器/机器上以不同的速度发生，硬编码的时间限制可能不起作用。将计时器设置为50毫秒应该起作用。。。我敢肯定，如果这只是在页面中定位一个div标记，而没有任何其他功能，那么它将比这快得多

$('#menu-item-1 a').click(function(){
    var y = $(window).scrollTop(); 
    $(window).scrollTop(y-50);
});

$('li > a').click(function(){
  setTimeout(function(){  
        var y = $(window).scrollTop(); 
        $(window).scrollTop(y-50); }, 1);
});

<ul id="menu">
  <li id="menu-item-1"><a href="#1" onClick = "handleClick(event, 1)">1</a></li>
  <li id="menu-item-2"><a href="#2" onClick = "handleClick(event, 2)">2</a></li>
  <li id="menu-item-3"><a href="#3" onClick = "handleClick(event, 3)">3</a></li>
  <li id="menu-item-4"><a href="#4" onClick = "handleClick(event, 4)">4</a></li>
</ul>

function handleClick(e, scrollElemId){
  e.preventDefault();
  window.scrollTo(0,document.getElementById(scrollElemId).offsetTop+50);
}