javascript - 链接滚动到顶部，并且不遵循移动设备上的目标

我正在尝试使用日历，按日期列出和按位置列出来创建事件页面。通过显示/隐藏带有JavaScript控制的选项卡的 View 来工作。我整理了一个CodePen demo here，但是请记住，由于有一些AJAX请求，它缺少了某些功能，并且在此示例中我无法重现该问题。但是您至少可以看一下代码，并大致了解正在发生的事情。

该问题出现在两个列表 View 中的移动设备上(在iOS上经过测试)。当我点击一个链接时，页面会滚动到顶部，而不是跟随该链接。但是，如果页面已经滚动到顶部，则可以跟踪最顶部的链接。我不知道问题出在哪里，但是我在JavaScript的任何地方都没有调用scrollTop()或类似的名称。我确实更改了document.location.hash的值，但是仅当#tabs > li为目标时。

一如既往地感谢您的帮助。提前致谢。

编辑1

根据Oded BD的要求，我将goToPage函数命名为tabsChildrenClick(第29-38行):

function tabsChildrenClick($tab) {
  $tabsChildren.each(function () {
    $($(this).data('href') + 'View').hide();
    $(this).removeClass('active')
  });

  let view = $tab.data('href');
  document.location.hash = view;
  $(view + 'View').show();
}

它使用触发更改的选项卡的jQuery对象，隐藏所有三个 View 并使所有三个选项卡都处于非 Activity 状态，并从给定的data-href中获取#calendar的值(例如$tab)，并使用它来更新document.location.hash并显示相应的 View 。

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

30 $activeTab.addClass('active');
31 galleryPage = archivePage = 1;
32 galleryEmpty = archiveEmpty = false;
33

编辑2

我之前可能并没有明确说明这一点，但是我的问题在于单击列表项选项卡和 anchor 标记。解决页面滚动到选项卡单击顶部的两个答案不能解决页面滚动至 anchor 定单击顶部的问题。我希望这可以澄清一下。

编辑3

我想我知道问题出在哪里，为什么我无法在演示中重现它。我添加了一个在页面滚动中隐藏的页脚，因此，如果$(window).scrollTop() == 0，则该页脚可见，否则，如果$(window).scrollTop() > 0，则该页脚隐藏。这可能是我感到沮丧的原因。代码来了。

编辑4

这是代码，但是删除它并不能解决我所希望的问题:

// scrolling footer
const breakpointMd = 768;
let hidden = false;
function showHideFooter() {
  let $footer = $('#footer');
  let width = $(window).width();
  let position = $('#content').scrollTop();

  if (width < breakpointMd) {
    if (position === 0 && hidden) {
      // similar to $footer.show();
      $footer.animate({
        'bottom': '0px',
      }, 500);

      hidden = false;
    } else if (position !== 0 && !hidden) {
      // similar to $footer.hide();
      $footer.animate({
        'bottom': '-49px',
      }, 500);

      hidden = true;
    }
  } else {
    hidden = false;
    $footer.css('bottom', '0px');
    $footer.show();
  }
}

$(window).on('scroll resize orientationchange', showHideFooter);
$('#content').scroll(showHideFooter);

编辑5

我将滚动页脚添加到了演示中，因为我仍然相信它会引起问题。我已经更新了CodePen demo以包括页脚，现在已重现了该问题。我还添加了一些return false;语句，但这没有帮助。

另一个值得注意的更改是，我使用<div id="grid">标签将包装器添加到整个页面。这可能会影响滚动。

最佳答案

我猜有两种方法可以做到这一点。

选项1:event.preventDefault()
调用传递给处理程序的事件对象的.preventDefault()方法。如果您使用jQuery绑定(bind)处理程序，则该事件将是 jQuery.Event 的实例，它将是 .preventDefault() 的jQuery版本。如果您使用addEventListener绑定(bind)处理程序，则它将是 Event 和 .preventDefault() 的原始DOM版本。两种方式都可以满足您的需求。

例子:

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

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

选项2:return false;
In jQuery:

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

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

如果您使用的是原始DOM事件，那么这也将在现代浏览器中起作用，因为HTML 5规范规定了这种行为。但是，该规范的较旧版本没有，因此，如果需要与较旧浏览器的最大兼容性，则应显式调用.preventDefault()。有关规范的详细信息，请参见event.preventDefault() vs. return false (no jQuery)。

关于javascript - 链接滚动到顶部，并且不遵循移动设备上的目标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59521400/