单击时滑动面板跳回主页

Question

我在一个 1page 网站上制作了一个垂直滑动面板（点击右上角的 psssst）。 总而言之，它工作正常，上下滑动正常（滑动时按钮上仍然有一点凹凸，但没什么大问题）。

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

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

提前致谢！

Answer 1

看来您有两个问题：

第一个问题（我认为您已经修复了它）

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

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

第二个问题

似乎即使在阻止默认行为之后，单击“#open”或“#close”仍然会使 Scroller 返回到初始状态。在 firebug 中，我可以看到这些元素上有一个处理程序，导致发生这种情况。您可以通过在 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); 

就是导致 Scroller 的原因“重置”、“返回”或其他什么。

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

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

希望这有帮助。

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;
});