<a href="#">のclickイベントで、表示を移動させないようにするには

下記のようなhtmlに対しclickイベントを設置し、

html

<a class="btn" href="#">Click Me!</a>

JavaScript

document.getElementById('.btn').addEventListener('click', function() {
  console.log('hogehoge');
 });

ってやってクリックすると、画面が一番上に…

原因

aタグクリック時の規定アクションのためにページ最上部に遷移してしまうようです。
この規定アクションを無効化する必要があります。

解決策

returen false;を入れたら回避しました。

JavaScript

document.getElementById('.btn').addEventListener('click', function() {
  console.log('hogehoge');
  return false;
 });

returnだけだとIE6で動作しないので、クロスブラウザ対策です。

参考にしたサイト

aタグのonClick、href="#"で表示を移動させたくない - おはようバッファロー

---

追記
return false;の代わりに
イベントの規定アクションを無効化するevent.preventDefault();メソッドも利用できるとコメントいただきました。

JavaScript

document.getElementById('.btn').addEventListener('click', function(event) {
  console.log('hogehoge');
  event.preventDefault();
});

「aタグの無効化 - preventDefaultとreturn falseの違いとか」にこれらの違いがまとめてあります。