preventDefault()に気づかず苦戦した話 #JavaScript

はじめに

こんにちは。
駆け出しフロントエンドエンジニアのももたれです。

最近はJavaScriptの基礎部分をひたすら書いてました。
自分の備忘録も兼ねて、preventDefault()に気づかず苦戦した話を書きます。

実装内容

ページTOPへ戻るボタン

ページに入り、ちょっとスクロールしたら右下に出てくる「ページTOPへ戻るボタン」
クリックしたらするするっとページTOPに戻る、まあよく見るあのボタンを作ろうとしてました。

htmlとcssでただの「ページTOPへ戻る」は作ったことありますが、JavaScriptを使っては初めて。
調べたらよさげな記事出てきたので、「お、いけそう」と思いきや、だいぶ苦戦しました。

コード

こんな感じで書いてました。

htmlは大した内容じゃないので省略します。
大事なのは、aタグ使ってました。

// スクロールしたらボタンが出てくる
const topBtn = document.querySelector("[data-target-following]");
window.addEventListener("scroll", scrollTrigger);
function scrollTrigger() {
  if(window.pageYOffset > 500) {
    topBtn.classList.add("is-show");
  } else {
    topBtn.classList.remove("is-show");
  };
};

どうってことないコードです。
クラスの付け替えで、スクロールしたらボタンが出たり消えたりを制御してます。
JavaScript初心者のわたしでも容易に書けました。

しかしこれではクリックすると、するするっとはページTOPにいってくれません。
瞬間移動した感じですね。

スムーススクロール

調べて出たのが、「スムーススクロール」（正式な名前ではないのかな）

// クリックしたときsmoothな動きで一番上まで移動
topBtn.addEventListener("click", (e) => {
  window.scrollTo({
    top: 0, 
    behavior: "smooth"
  });
});

なんだー簡単じゃん！！と思ってましたが、あれ、、思った挙動にならない、、
するするっとページTOPにいってくれない、、

ここで時間めっちゃ溶かしました。。。

preventDefault()

結論、

preventDefault()

この1行がなかっただけでした。それだけ

今回aタグを使って書いていたので、aタグのデフォルトの動作が発生してしまっていたようです。
それを打ち消した上で、スムーススクロールを書く必要がありました。

下記のコードで無事に成功！
もう絶対忘れない。。

// スクロールしたらボタンが出てくる
const topBtn = document.querySelector("[data-target-following]");
window.addEventListener("scroll", scrollTrigger);
function scrollTrigger() {
  if(window.pageYOffset > 500) {
    topBtn.classList.add("is-show");
  } else {
    topBtn.classList.remove("is-show");
  };
};
// クリックしたときsmoothな動きで一番上まで移動
topBtn.addEventListener("click", (e) => {
  e.preventDefault()
  window.scrollTo({
    top: 0, 
    behavior: "smooth"
  });
});

まとめ

e.preventDefault()で本来の動作を打ち消さないと思った通りの挙動になってくれませんでした。
フォーム送信ボタンのtype="submit"を打ち消して、送信する前にバリデーションを出すときなどにも使うっぽいです。
（浅はかな理解）

挫折しかけたJavaScriptだけど、初歩的な部分は理解できるようになってきました。
引き続きがんばります。