0

I have

<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>

When the links are clicked it performs the show / hide functions but scrolls to top of the page because of 

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

What should be modified to prevent page scrolling?

Thank you,

4

2 回答 2

4

Change the links from

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

to

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

This has the link call a dead end javascript function instead of navigating to the site.com/# url.

Other common ways to prevent jumping to the top of the page are:

Return false on the javascript handler. This prevents the default behavior of the link. 

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

or just call preventDefault()

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

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

or this

<a href="javascript: false;"></a>
于 2013-02-25T15:57:47.990 回答
0

Instead of stopPropagation(), use preventDefault().

于 2013-02-25T15:54:34.070 回答