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项目中的所有标签，例如

$('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);
}

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

2 个答案: