kokeblog

jQueryを使って一番上に戻るボタンを実装する

  • 2020年04月19日
  • 今回はjQueryを使って一番上戻るボタンを自力で実装していこうと思います。調べたらコピペでそのまま使えるコードが出てきますが今まで学んできたことの復習として自分の力で書いていきます。ところどころに解説も書いていきます。

    特定の要素をクリックしたら一番上にスクロールしながら戻っていくようなものを実装していきたいと思います。それでは早速実装していきます。

    実際にやってみる

    scrollTopを使って一番上に戻るように実装する

    まずはアニメーションさせずに単純に一番上に戻るだけのものを実装しました。これはtopBtというクラス名のついたa要素にクリックイベントが発生したときに処理されるようになっています。画面のスクロール位置を指定するためにscrollTopを使います。scrollTopはスクロール位置を取得、設定することができます。scrollTopの()の中に指定したいスクロール位置を数値で指定します。今回は一番上に戻りたいので0になります。これだけならかなり簡単にできますね。

    animate関数を使ってスクロールしながら一番上に戻るようにする

    上のものだと一番上には戻るようにはなりますが、これだけだとなんだか微妙な感じがするのでanimate関数を使ってスクロールしていいきながら戻るようにします。前回まなんだことを使っていきます。まあanimateと前に付け足すくらいですけどね。ほとんど要素がないのでスクロールしているかがわかりにくいですが処理としてはこれでOKです。

    実際に使えそうにCSSなども使う

    実際に使えるようにCSSも使って実装していきます。codepenでもfontAwesomeが使えたので利用して実際に使えそうな感じにしてみました。今回はjQueryがメインなのであまりCSSについては深くは 解説しませんがpositionのfixedを使って右下に配置している感じです。あとはa要素を使ってホバーしたときにカーソルがクリックするときのカーソルに変化するようにしました。ちなみにfontAwesomeで選んできたアイコンは色や大きさも変えれます。

    まとめ

    今までは学んだことのまとめ的なものばかりでしたが今回、実際に使う感じのものを作っていきました。いままでブログでコピペして頼っていたことを自分でできるようになるのは割とうれしいものですね。とはいえまだまだな部分ばかりなのでこれからも学習を続けてできることを少しづつ増やしていきたいです。また学んだことを記事にしていきたいですしね。

    Pocket

    関連記事

    Sassの基礎

    Sassの環境を整える

    jQueryのeachメソッドの使い方

    jQueryのanimate関数について

    カテゴリー