Question

我有

<script>
$(document).ready(function() {
$("#closesrch").click( function (e) {
e.stopPropagation();
$(this).parent().parent().hide();
});

$("#basemaplink").click( function () {
$(".maplist").toggle('fast');
});
});
</script>

<div class="searches">
 <div class="advsearch">
      <a href="#" id="closesrch"><img src="images/icon_close.png" alt="close"></a>
      ADVANCED PROPERTY SEARCH
 </div>
 Contents here...
</div>


<div class="basemapdiv">
 <a href="#" id="basemaplink"><img src="images/btn_basemap.png" alt="basemap" class="basemapbtn"></a>
 <div class="maplist" style="display:none;">
 Contents here...
 </div>
</div>

单击链接时，它会执行显示/隐藏功能，但由于

而滚动到页面顶部

<a href="#"></a>

应该修改什么来阻止页面滚动？

谢谢，

Answer 1

从

更改链接

<a href="#"></a>

到

<a href="javascript:void(0);"></a>

这有链接调用死端javascript函数，而不是导航到site.com/# url。

防止跳转到页面顶部的其他常用方法是：

在javascript处理程序上返回false。这可以防止链接的默认行为。

$('#blahblah').on('click', function(){
    // your code
    return false; // prevents the page jump
});

或只是调用preventDefault（）

<a href="#" id="blahblah"></a>

$('#blahblah').on('click', function(e){
    e.preventDefault();
    // your code
});

或者

<a href="javascript: false;"></a>

Answer 2

而不是stopPropagation()，请使用preventDefault()。

jQuery显示或隐藏点击滚动到页面顶部

2 个答案: