jquery - 滚动条被 jQuery 显示和隐藏卡住了

Question

我使用 jQuery 来显示和隐藏各种 div 以对内容进行分页。然而，在选择显示或隐藏 div 的选项(例如，第 1、2 或 3 页)后，我会立即不规则地上下滚动，而不是让我向下滚动页面。我根本不知道是什么原因造成的，并且在 Stack Overflow 和 Google 上进行搜索后，这似乎不是其他人遇到过的问题。有人对可能导致此问题的原因以及如何纠正它有建议吗？

Answer 1

你的意思是不希望页面跳转到顶部？如果是这样，那么它正在发生，因为您的 <a>标签有href="#" 。这是浏览器的正常行为，您可以在任何网站上进行测试。只需向下滚动页面，在 URL 末尾添加哈希值，然后按 Enter，浏览器就会移动到页面顶部。

您正在使用 jQuery 将函数绑定(bind)到 <a> 上的单击事件。标签将首先执行该函数，然后继续遵循 href 。为了防止这种情况继续发生，您可以 return false;从函数或使用内置 jQuery 函数 preventDefault() 和 stopPropagation() 防止默认行为并停止事件传播 - 请参阅 event.preventDefault() vs. return false

因此将您的代码更改为:

$("div.pages a.page1").click(function() {
    $("div.pd-item#tethco, div.pd-item#novi, div.pd-item#inna").show();
    $("div.pd-item:not(#tethco, #novi, #inna)").hide();
    return false;
});

也对 a.page2 执行相同的操作和a.page3绑定(bind)函数，页面将不再跳转。