单击时滑动面板跳回主页

Question

我在一个 1page 网站上做了一个垂直滑动面板（点击右上角的 psssst）。 总而言之，它工作正常，可以正常上下滑动（滑动时按钮上仍有一点凸起，但没有太大）。

问题是当您向右滚动然后单击滑动面板时，它会跳回页面的开头。

我该如何解决/防止这种情况？ 你可以在这里查看问题：http://www.basenharald.nl/3d

提前致谢！

Answer 1

看来你有两个问题：

第一个问题（我想你已经解决了）

锚点上的点击事件将您发送到“/#”网址。发生这种情况是因为锚元素的 href 为“#”，并且浏览器的 默认 行为是将您发送到该 URL。

为了防止这种情况发生，你应该在你的点击事件处理程序中使用e.preventDefault()，或者return false如果你想停止所有的事件传播（因为这就是 jQuery 的工作原理）。

第二个问题

似乎即使在阻止默认行为之后，单击“#open”或“#close”仍会使 Scroller 回到初始状态。在萤火虫中，我可以看到导致这种情况发生的那些元素上的 click 事件有一个处理程序。您可以通过在 firebug 中运行它自己来查看：

console.log($('#close')[0].onclick.toString())

你会看到这个：

function () {
  Scroller.end(this);
  l = this.hash.substr(1);
  a = document.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    if (a[i].name == l) {
      clearInterval(Scroller.interval);
      Scroller.interval = setInterval("Scroller.scroll(" + Scroller.offsetParent(a[i]) + ")", 10);
    }
  }
}

您似乎在代码中的某处为所有锚点分配了一个事件处理程序，并且该行

Scroller.interval = setInterval("Scroller.scroll(" + Scroller.offsetParent(a[i]) + ")", 10); 

是什么导致您的滚动条“重置”、“返回”或其他什么。

也许问题是有条件的？也许if (a[i].name == l) 总是评估为 true 并最终将事件处理程序分配给 all 锚点，即使这不是它的意图。

我对你的应用和/或你正在使用的任何插件了解不够，所以我只能告诉你问题出在哪里，并且在这个函数中。

希望这会有所帮助。

Answer 2

尝试将return false; 添加到您的点击处理程序：

// Expand Panel
$("#open").click(function(){
    $("div#panel").slideDown("slow");
    return false;
}); 

// Collapse Panel
$("#close").click(function(){
    $("div#panel").slideUp("slow");
    return false;
});