しかしこの場合、クリックするといったん画面の上に移動してしまいます。ページの内容が画面内に収まっていれば問題ないのですが、スクロールする必要がある長さの場合、おかしな動きになってしまいます。そこで、このaタグの余計な動きを無効にする方法［その１］です。
"return false"を加える
サンプルとして、aタグに href="#" を使って作成した「文字を追加１」ボタンと「文字を追加２」ボタンを用意しました。この2つは、ID名を変えただけで同じ構造です。
HTMLソース
<a id="exsf1" class="kahen-green" href="#" style="float:left;">
<span>文字を追加１</span>
</a>
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
「画面の上に移動」動作を検証するため、あえてページ表示を下げています。
（例１）この後ろに文字を追加
文字を追加１
$(function() {
$("#exsf1").click(function() {
$(".exs1").append("<b style='color:red'>【追加部分】</b>");
});
});
この例では、「文字を追加１」ボタンをクリックすると、文字列の後ろに「【追加部分】」を追加します。実際にクリックすると、画面上に移動してしまいます。スクロールして戻ると、スクリプトは正しく機能していることが分かりますが、動きとしてはおかしなものになってしまいます。
次に、（例２）では、スクリプトに「return false」を追加しています。「文字を追加２」ボタンをクリックすると、今度はhrefの動きをキャンセルして移動せず、その場で動作します。
（例２）この後ろに文字を追加
文字を追加２
$(function() {
$("#exsf2").click(function() {
$(".exs2").append("<b style='color:red'>【追加部分】</b>");
return false
});
});
