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

我在单个网页上有一个菜单，其链接将页面移动到具有相应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); });

有没有办法监听一个链接动作来完成，然后运行我的滚动代码？

来源

2017-07-07 AKor

没有尝试设置超时，就会有闪烁效果，虽然（不显着）

你也可以改变你的单击事件处理里项目内的全部标签这样

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

这里是你https://jsfiddle.net/fxabnk4o/16/

来源

2017-07-07 19:23:17

我想这一点，但想看看是否有这样做一个更清洁的方式。我有过设置超时的经验，如果某个事件在不同的浏览器/计算机上以不同的速度发生，硬编码的时间限制可能不起作用。 – AKor

设置计时器为50毫秒应该工作......我很确定，如果这只是一个定位到页面内的div标签没有任何其他功能，它会比这更快 –

样本小提琴正如你观察到：

但现在看来，回调发出后的页面被移动，否定我试图滚动

这是因为你的事件连接到锚标记之前的锚标记默认行为将被执行。您正在使用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); 
}

来源

2017-07-07 20:19:19

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

回答

相关问题