javascript - 链接滚动到顶部并且不跟随移动设备上的目标

Question

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

该问题出现在移动设备(在 iOS 上测试)的两个 ListView 中。当我点击链接时，页面滚动到顶部，而不是点击该链接。但是，如果页面已经滚动到顶部，我就可以点击最顶部的链接。我不知道问题出在哪里，但我不打电话scrollTop()或者我的 JavaScript 中任何类似的东西。我确实更改了 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 并使所有三个选项卡处于非事件状态，其值为 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">标签。这可能会影响滚动。

Answer 1

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

选项 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:返回 false；

In jQuery :

Returning false from an event handler will automatically call event.stopPropagation() and event.preventDefault()

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

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

如果您使用原始 DOM 事件，这也适用于现代浏览器，因为 HTML 5 规范规定了这种行为。但是，旧版本的规范没有，因此如果您需要与旧浏览器的最大兼容性，您应该显式调用 .preventDefault() 。请参阅event.preventDefault() vs. return false (no jQuery)了解规范详情。