アンカーリンク(#)が出てくると途端に出てくる問題

昨今流行りの「ペライチ」（別に昨日今日の流行りではないのですが、クライアントでさえ、この言葉を注文時に使う今日この頃です）では、アンカーリンクが必要になる場面がほとんどですが、アンカーに対して、ぬるっとスクロールさせるJavascriptをかませると、必ずといっていいほど問題が2〜３出てきます。毎度悩まされて、似たような解決策をなんとなく使っているので、定義づけしておこう！

原因は、jQueryのイベントを動かす際に「#」が使われていること。これがアンカーと勘違いされて誤動作、不動作、いらないスクロールが発生したりします。回避策として簡単なのは、ぬるっとスクロールさせる為のアンカーにクラス指定などをしておくことです。下はクラス指定なしの通常のアンカーリンク、上がクラス指定したものです。ヘッダーのナビ以外の「#」はスクロールが発生しないようにするとか、アンカー側の定義を狭めておくイメージ。

更にその上で、jQueryで利用している「#」にも処理をしておきます。リンクを無効にします。方法はいくつかあります。

<a href="javascript:void(0);">リンクしない</a>

<a href="#" onclick="return false;">リンクしない</a>

この魔法の呪文のようなvoid(0)ですが、voidは必ずundefinedを返してきます。undefinedが返ってくるとどうなるかは、だいたい分かるかと思いますが、何も起こりません。ですから、href属性で何か事を起こそうとしても、未定義なので何もしない＝リンクもしない。ということになります。(0)はたまたまこれを使っているだけで、他の何で構わない。全部undefinedなので。
jQueryでreturn falseを使うと、親要素へのバブリング（伝達）がストップします。結果クリックが無効になるという理屈になります。