Javascript 链接滚动至顶部，不跟随移动设备上的目标

我正在尝试创建一个包含日历、按日期列表和按位置列表的事件页面。这通过显示/隐藏带有JavaScript控制的选项卡的视图来实现。我已经编写了一个，但请记住，由于有一些AJAX请求，它缺少一些功能，因此我无法在本例中重现这个问题。但是，您至少可以查看代码并对正在发生的事情进行概述

该问题出现在移动设备（在iOS上测试）的两个列表视图中。当我点击链接时，页面会滚动到顶部，而不是跟随该链接。但是，如果页面已经滚动到顶部，我可以跟踪最顶部的链接。我不知道问题出在哪里，但我不会在JavaScript的任何地方调用

scrollTop（）

或类似的东西。我确实更改了

document.location.hash

的值，但仅当

#tabs>li

是目标时

我们将一如既往地感谢您的帮助。提前谢谢

编辑1

根据Oded BD的要求，我的

goToPage

函数，我将其命名为

tabsChildrenClick

（第29-38行）：

函数选项卡Schildrenclick（$tab）{
$tabsChildren.每个（函数（）{
$（$（this.data（'href'）+'View'）.hide（）；
$（this.removeClass（'active'））
});
let view=$tab.data（'href'）；
document.location.hash=视图；
$（视图+‘视图’）.show（）；
}

它获取触发更改的选项卡的jQuery对象，隐藏所有三个视图并使所有三个选项卡处于非活动状态，从给定的

$tab

中获取

数据href

（

#日历

）的值，并使用它更新

document.location.hash

，并显示相应的视图

请注意，我从原始演示中删除了第30-33行（在函数的开头），因为它们引用了不同项目中的变量和/或此项目中不需要的变量（复制/粘贴错误）：

30$activeTab.addClass（'active'）；
31 galleryPage=archivePage=1；
32 galleryEmpty=archiveEmpty=false；
33

编辑2

我以前可能没有明确说明这一点，但我的问题在于单击列表项选项卡和锚定标记。这两个答案解决了页面在选项卡单击时滚动到顶部的问题，但没有解决在锚定单击时滚动到顶部的问题。我希望这能提供一些澄清

编辑3

我想我知道问题在哪里，为什么我不能在我的演示中重现它。我添加了一个隐藏在页面滚动上的页脚，因此如果

$（窗口）.scrollTop（）==0

，页脚将可见，否则如果

$（窗口）.scrollTop（）>0

，页脚将隐藏。这可能是我沮丧的原因。密码即将到来

编辑4

下面是代码，但删除它并没有像我希望的那样消除问题：

//滚动页脚
常量断点md=768；
让隐藏=虚假；
函数showHideFooter（）{
设$footer=$（“#footer”）；
让宽度=$（窗口）.width（）；
让位置=$（“#内容”）.scrollTop（）；
如果（宽度

编辑5

我在演示中添加了滚动页脚，因为我仍然认为它会引起问题。我已经更新了，包括页脚，现在这个问题已经被复制。我还添加了一些

returnfalse语句，但这没有帮助

另一个值得注意的变化是，我在整个页面中添加了一个带有
标记的包装器。这可能会影响滚动。我想有两种方法可以做到这一点

选项1:
event.preventDefault（）
调用传递给处理程序的事件对象的
.preventDefault（）
方法。如果使用jQuery绑定处理程序，则该事件将是的实例，并且将是的jQuery版本。如果使用
addEventListener
绑定处理程序，则它将是的原始DOM版本。任何一种方法都能满足你的需要

示例：

$('#ma_link').click(function($e) {
    $e.preventDefault();
    doSomething();
});

document.getElementById('#ma_link').addEventListener('click', function (e) {
    e.preventDefault();
    doSomething();
})

选项2：
返回false
:

从事件处理程序返回false将自动调用event.stopPropagation（）和event.preventDefault（）

因此，使用jQuery，您也可以使用这种方法来防止默认链接行为：

$('#ma_link').click(function(e) {
     doSomething();
     return false;
});

如果您使用的是原始DOM事件，这也适用于现代浏览器，因为HTML5规范规定了这种行为。但是，早期版本的规范没有，因此如果您需要与早期浏览器的最大兼容性，则应显式调用
.preventDefault（）
。有关规范详细信息，请参阅。
修改文档.location.hash将导致浏览器滚动到该元素。如果页面上没有具有该ID的元素，则它将滚动到页面顶部

为什么不使用

history.pushState({}, '', '#' + view);

或

相反


请参见此处的更多解决方案：


编辑：仔细查看您提供的代码笔，我发现有两个地方有下面这行代码

document.location.href = '#' + context['day'];

将它们替换为

history.pushState({}, '', '#' + context['day']);

应该修复您链接的代码笔中的问题。
您是否在页面中使用锚定标记？如果是这样，您可能需要使用tabindex。这里有一个答案：谢谢你的建议，但这没有帮助。动态添加值是一件痛苦的事情，但我认为允许用户通过链接进行制表是值得的。谢谢你给我介绍这个属性！
history.pushState({}, '', '#' + context['day']);