页面跳转到锚点后移动屏幕滚动位置?

Question

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

我正在尝试确定一种在页面移动到某个部分后将页面滚动 50px 的方法。我尝试在每个链接上做一个.click()事件侦听器，但似乎在发出回调后页面被移动，否定了我的滚动尝试。

我的代码如下所示：

.HTML：

<ul id="menu">
<li id="menu-item-1"><a href="#1">1</a></li>
<li id="menu-item-2"><a href="#2">2</a></li>
<li id="menu-item-3"><a href="#3">3</a></li>
<li id="menu-item-4"><a href="#4">4</a></li>
</ul>

JS：(两条内线在控制台中工作，但在页面代码本身中不起作用(

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

有没有办法侦听链接操作完成，然后运行我的滚动代码？

Answer 1

您是否尝试设置超时，但它会产生闪烁效果(不明显(

您还可以更改单击事件以处理 li 项目中的所有 A 标签，如下所示

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

这是给你的样本小提琴 https://jsfiddle.net/fxabnk4o/16/

Answer 2

正如你所观察到的：

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

发生这种情况是因为附加到锚标记的事件将在锚标记默认行为之前执行。 您正在使用id，因此您也可以使用它通过javascript进行滚动。 这是我尝试过的示例： http://plnkr.co/edit/FzHYaxMCeOMTvWurtNRe?p=preview

<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);
}