jQueryに依存しないタイプの上に戻るボタン「ue-scroll.js」を作った

といっても公開自体は随分前からしていたのですが。
いろいろと試行錯誤をしてバージョンアップしたりしてようやく落ち着いたところで、せっかくなので紹介記事を書いてみることにしました。

azrsix.github.io

タイトルの由来はまんま上スクロールです。THE 日本語！

これはなに

アイコン見ただけでだいたい想像がつくと思いますが、いわゆる下のほうにページをスクロールするとニュッと出てきたりするクリックとかして上に戻るアレです。
上記サイトにもそのまま動くサンプルがありますが、簡易的なデモは以下の通り。

See the Pen ue-scroll.js by azrsix (@azrsix) on CodePen.

なぜ作ったか

「トップに戻るボタン」などでGoogle検索をするとjQueryを使用したサンプルなど紹介している記事はたくさんあるのですが（それはそれでとても有用なものなのですが）かねてから外部のライブラリに依存しない、単独で動くタイプのトップに戻るボタンがほしいなーとなんとなく思っていました。
というわけで、無いのなら自分で作ろうほととぎす（字余り）

で、せっかく作るならなんか今風っぽくES6でimportとかするやつでも使えるようにしようぜ！ということでふんわりそんな感じの構成で作っています。
ただまあ、大体はこういうの読み込んだだけで使えるようにしたいよな、とも思うので、普通にlinkタグとscriptタグでそのまま読み込むだけでも使えます。

動作環境など

PC・スマホ両対応で、だいたいの最近の主要なブラウザでは動くはずです。
IEだけはですね、すみません窓から投げ捨てました（Edgeでは動作します）
まあ、以下のような記事があるくらいなので今後もこの方針は変わらないかなーと思います。みんな前を向いて生きていこう。

Internet Explorer の今後について – Japan IE Support Team Blog

つかいかた

https://azrsix.github.io/ue-scroll-js/ja/docs.html#getting-started

基本的には上記のドキュメントを見て頂くのが一番手っ取り早いんですが、忙しい人用みたいな感じで書くと下記の通りnpmかyarnでのインストールが可能です。

$ npm install ue-scroll-js --save

$ yarn add ue-scroll-js

あと、個人的には極力パッケージマネージャーの使用を推奨しますが、以下にも一応アーカイブを置いてはいるので、解凍した直下のdistフォルダから各種minファイルを直接取り出しても使えなくもないです。使えなくもないですが、これを機にいっそのことパッケージマネージャー導入したほうがあとあとたぶん楽です。

Releases · azrsix/ue-scroll-js · GitHub

また、とりあえずまずはお手軽に試してみたいという場合はunpkgのCDNが使えるので下記のタグをご使用ください。

<link rel="stylesheet" href="//unpkg.com/ue-scroll-js@latest/dist/ue-scroll.min.css">
<script src="https://unpkg.com/ue-scroll-js"></script>

うごかしかた

所定の場所にファイルを置いてlinkタグ、scriptタグで読み込むだけでしたらあとは </body> （閉じタグ）の手前などに下記のコードを設置して頂ければデフォルト状態で動作します。

<div id="ue-scroll" class="ue-scroll btn-white arrow-black circle shadow"></div>
<script>
  UeScroll.init();
</script>

webpackなどで組み込んで使用する場合は上記のうち <div id="ue-scroll" class="~~~"></div> 部分のタグだけHTMLないしはテンプレートファイルに記述して、以下のようなコードで起動できます。このあたりは適宜環境に合わせて。

'use strict';
import ue from 'ue-scroll-js';
ue.init();

カスタマイズなど

具体例についてはドキュメントのほうが詳しいのですが、init()時にいくつかのオプションを渡せるのでお好みでカスタマイズしてください！
ざっくり変更可能なオプションとしては

ボタンのセレクタ名
ボタンがいつ出てくるかのスクロール位置の指定
スクロール・フェードの速度
スクロール途中でのキャンセルを可能にするか

などです。
また、ボタンのスタイルやボタン本体の位置などについては完全にCSSのみで制御しているので、それらのみ変更したい場合にはJS部分の修正は不要となります。

初期状態で用意されているスタイルであれば

白ボタン／黒ボタン／灰色ボタン
円形／角丸四角形／四角形
影つき／影なし

上記それぞれにclassが割り振られているので、それらを組み合わせればだいたいのWebサイトには馴染むボタンになると思います。

ちなみに、もし完全にオリジナルのデザインにしたい場合は、もともとあるCSSは読み込まずに自前でCSSを用意してしまってもまったく問題ありません（ただし、位置指定に関するスタイルなどは自前で用意する必要があります）

さいごに

ライセンスは MIT License です。

だいぶミニマムなライブラリなので機能追加する内容もそんなに無いかもしれないのですが、ぼちぼちメンテナンスしていきたいなーとは思ってます。
というわけで、今後ともどうぞよろしくお願いいたします。

TYPING BIRD BLOG

粛々とキーボードを叩く鳥類のブログ。技術系だったりそれ以外だったり。