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

related

CSSアニメーションの基礎

自分自身CSSはある程度かけるのですが、CSSアニメーションについてはあまりかけないので今回、自分の勉強がてらこのブログにまとめていこうと思います。 CSSアニメーションには「transition」と

フロントエンド

2020.03.19

GitHub PagesとNetlifyでポートフォリオを公開してみた

今回は無料で静的サイトを公開できるGitHub PagesとNetlifyでポートフォリオを公開してみたので手順やメリットなどについてまとめていこうと思います。下記のURLが公開したポートフォリオです

フロントエンド

2020.09.09

忘れがちなCSSプロパティ

今回はつい忘れてしまうCSSのプロパティについてまとめていきます。たまに使うときに毎回調べている気がするので備忘録と頭に入れ直すために記事として書いていきます。 position まずはpositio

フロントエンド

2020.10.11

Sassの基礎

前々回の記事でSassの環境を整えました( Sassの環境を整える ) 。今までは使うための準備でしたが今回は実際に使っていくための基本的な書き方を学習していきます!Sassにはたくさん書き方や応用で

フロントエンド

2020.05.31

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き