jquery - クリックするとjQueryが表示または非表示になり、ページの上部にスクロールします

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>

これにより、リンクは site.com/# URL に移動する代わりに行き止まりの JavaScript 関数を呼び出します。

---

ページの先頭へのジャンプを防止するその他の一般的な方法は次のとおりです。

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()。