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

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中修复此问题,您需要阻止click事件传播或"冒泡" DOM.您可以通过从click事件返回false来执行此操作.

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

您还可以使用通常命名的参数在bind的单击处理函数中使事件可用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
   })
});