Jquery：下拉菜单导致页面跳转到顶部

Question

我在“更多”链接上有一个下拉菜单，但如果您在页面中向下滚动时单击固定位置菜单“更多”，页面会自动跳到顶部。为什么是这样？我可以改变这个吗？非常感谢

http://jsfiddle.net/rKaPN/61/

编辑：我已将链接从href =“＃”更改为href =“www.google.com”，因为我想要一个链接，因为js无法加载。同时添加return false会导致ul中的所有链接中断。有什么想法吗？

Answer 1

只需从链接中删除href="#"部分，这就是导致它的原因，因为您已经获得了onClick事件，所以不需要它。

Answer 2

在您的代码中，在event.preventDefault();

之后添加event.stopPropagation();

http://jsfiddle.net/AlienWebguy/rKaPN/52/

修改

根据您的评论，如果您想在导航中将非链接与网址链接混合，只需为活动链接指定class="link"即可。然后在您的代码中，您将使用条件来阻止默认事件：

  if($(this).hasClass('link')){
      window.location = $(this).attr('href');
  }
  else {
      event.stopPropagation();
      event.preventDefault();
  }

Answer 3

详细说明RobinJ的回答：

它跳到顶端的原因是哈希用于页面锚定。这意味着将视图定位在特定锚点的名称上。如果您使用没有引用锚名称的哈希，默认情况下屏幕将锚定到页面顶部。

在锚点上使用javascript进行不涉及移动屏幕或请求新URL的操作时，通常不需要输入href属性。很多人似乎认为<a>需要这个，但事实并非如此。

Answer 4

详细说明RobinJ的回答：

它跳到顶端的原因是哈希用于页面锚定。这意味着将视图定位在特定锚点的名称上。如果您使用没有引用锚名称的哈希，默认情况下屏幕将锚定到页面顶部。

有很多方法，但我个人跳过添加href属性。

Answer 5

页面跳转，因为链接将您重定向到“＃”，您可以添加return false;作为处理onclick事件的代码的最后一个语句...，这应该可以解决您的问题。< / p>

Answer 6

对于onclick事件，你可以返回值，例如onclick =“return someFunction（）”

如果someFunction返回值false，则不会跟随链接。

在这种情况下，它会忽略＃。如果你有一个URL，它同样会忽略它。

在你的情况下，因为你绑定了jquery，你可以在函数结束时返回false：

menu.find('ul li > a').bind('click',function (event) {
...
return false;
}

方法event.preventDefault（）也会执行此操作，但最好知道您可以返回false以使浏览器停止事件。

Answer 7

将href="#"替换为href="javascript:void(0);"。