aタグをクリックした時にスクロールされないようにしたい

Question

<ul class="clearfix">
	<li class="top"><a href="/"><span>トップ</span></a></li>
	<li class="recommend"><a href="#recommend"><span>おすすめ</span></a></li>
	<li class="search"><a href="#"><span>探す</span></a></li>
	<li class="cart"><a href="/cart/"><span>買い物かご</span></a></li>
</ul>

上記のようなメニューを作っていまして、
「探す」のボタンをクリックした時に、検索エリアが表示されるようにjQueryを使って実装しているのですが
ページ途中でクリックした時に、ウインドウの一番上にスクロールされてしまうので
スクロールをキャンセルすべく、

$(function(){
	$("header nav .search a").on('click', function(){
		$(".searchArea").toggle(150);
		return false;
	});
});

という風に、処理の最後にreturn falseを入れているのですが、なぜかページ上部にスクロールしてしまいます。
スクロールされないようにするにはどのようにしたら良いか、ご教示いただければと思います。
どうぞよろしくお願いいたします。

Answer 1

動くサンプル：https://jsfiddle.net/w9hvs2ed/

---

コード自体は動くので、header nav .search a という指定が間違っているのでは。

Comments

[heureux]

コメントありがとうございます！
`header nav .search a`の指定は合っていたのですが、
他の処理が影響してしまっていることに気づきました...
原因が他の箇所にあるかもしれないことに気づかせていただき、ありがとうございました！