为什么点击链接会跳转到页面顶部？

Question

这可能听起来很奇怪，我有一个页面，其中有一个链接：

<a href="#" class="emails" > Email to Friends </a> 

现在我有一个事件附加到锚标记，以便在单击给定的 div 时切换它的状态。

Javascript 代码如下所示：

$(document).ready(function() {
    $(".emails").bind("click",function() {
       $("div#container").toggle
   })
})

现在上面的代码和所有的工作都很好，但这里有一个大问题，当我点击给定的链接时，页面的焦点移动到页面的顶部，我必须一直向下滚动才能看到变化。

谁可以帮我这个事？

Answer 1

这样做是因为href="#"是一个空锚点。 锚用于链接到页面内的特定位置。 空锚会导致页面返回顶部。

要在您的 javascript 中修复此问题，您需要防止点击事件传播或“冒泡” DOM。 您可以通过从您的点击事件返回 false 来做到这一点。

$(document).ready(function() {
    $(".emails").bind("click",function() {
       $("div#container").toggle();
       return false; // prevent propagation
   })
});

您还可以通过使用通常名为e的参数使事件在绑定的单击处理程序函数中可用。 访问该事件允许您调用其上的方法，例如.preventDefault() 。

$(document).ready(function() {
    $(".emails").bind("click", function(event) {
       $("div#container").toggle();
       event.preventDefault(); // this can also go at the start of the method if you prefer
   })
});

Answer 2

这将解决所有锚为空的情况。

$(document).ready(function () {
    $('a').click(function () {
        $('[href = #]');
        return false;

    });
});

Answer 3

这个来自href='#'的a 。 只需删除此标签。 但从技术上讲，它不再是链接，因此光标在它上面时将默认为文本选择器。 您可以在 CSS 中使用cursor:pointer覆盖它。 请参阅本网站的左侧菜单以供参考。

Answer 4

采用：

<a href="javascript:void(0)" class="emails" > Email to Friends </a> 

或者，使用 jQuery，

$(document).ready(function() {
    $(".emails").attr("href","javascript:void(0)");
})

Void(0) 返回 a.. 嗯.. 它不返回任何东西。 浏览器知道如何去无（即，如果你做了href="" ）和# （ #是页面的顶部），但不知道如何去空的“值”。

每当您在属性中放置javascript:时，该属性的值都会设置为内部代码的返回值。 第一次访问属性时调用该代码。

但是， void(0)什么都不返回。 甚至没有"" 。 浏览器认为这意味着该链接根本不是链接。