ページの右下に固定で要素を配置

まずは、HTMLを以下のように準備。このサイトの右下に出てくるボタンの要素で、WordPressで作っているので、footer.phpファイル内に記述してます。

<div id="move-to-the-top" class="move-to-the-top">
	<span class="dashicons dashicons-arrow-up-alt2"></span>
</div>

配置はCSSで対象になる要素をページの右下固定で設定します。このあたりはお好みで。

.move-to-the-top {
	background: #444444;
	border-radius: 25px;
	bottom: 20px;
	color: #ffffff;
	cursor: pointer;
	height: 50px;
	position: fixed;
	right: 20px;
	width: 50px;
	z-index: 9999;
}

.move-to-the-top span {
	align-items: center;
	display: flex;
	height: 50px;
	justify-content: center;
	width: 50px;
}

id属性の設定はJavaScriptのイベントトリガーとして使用します。

タッチイベントによるイベントトリガーの分岐

ボタンのイベントトリガーはクリックになりますが、スマートフォンなどのように画面をタッチするデバイスにはTouch event（タッチイベント）を持っています。クリックより先に動作が始まるので、クリックイベントでも動かなくはないですが一瞬遅延します。ですので、タッチイベントに対応しているデバイス（ブラウザ）であればタッチイベントをイベントトリガーにし、そうでなければクリックイベントで実装します。

;(function($) {
	"use strict";
	$(function() {
		var
			event = "ontouchend" in window ? "touchend" : "click",
			elmMove = $("#move-to-the-top");
	});
})(jQuery);

id属性を指定したターゲット要素を変数に保持しておきます。

ページのトップまでスクロール移動させる

要素がクリック（タップ）されたらjQueryのanimateを使用して、ページのトップまでスクロールを移動させます。以下の通り（8〜11行目）イベントを追加しました。

;(function($) {
	"use strict";
	$(function() {
		var
			event = "ontouchend" in window ? "touchend" : "click",
			elmMove = $("#move-to-the-top");

		elmMove.on(event, function(e) {
			e.preventDefault();
			$('html, body').animate({scrollTop: 0}, 500);
		});
	});
})(jQuery);

9行目：クリック（タッチ）イベントに対して、preventDefaultを実行しています。もし対象がa要素やbutton要素だったりした場合、イベントが発火してしまうのでイベントをキャンセルさせます。（特にa要素はhref属性の指定先に遷移してしまいます）

10行目：ページのスクロール値（この場合、縦スクロール値）を持っているhtml要素とbody要素のスクロールの値を0（トップ）に500ミリ秒で戻す処理を書いています。これでクリック（タップ）すれば、500ミリ秒でページのトップまで移動してくれます。

プラグイン化してスクロールのスピードを自由に

jQueryプラグインの作り方をベースにこの処理をプラグイン化。

;(function($){
	$.fn.topMove = function(options){
		var defaults = {
			"speed": 500
		};
		var
			settings = $.extend( {}, defaults, options ),
			event = "ontouchend" in window ? "touchend" : "click";

		return this.each(function(){
			$(this).on(event, function(e) {
				e.preventDefault();
				$('html, body').animate({scrollTop: 0}, settings.speed);
			});
		});
	};
}(jQuery));

デフォルト値としてspeedパラメータを500（ミリ秒）に設定しておきます。これをHTMLファイル側で引数を渡してコールします。

$(function(){
  $("#move-to-the-top").topMove({speed: 1000});
});

できた！＼(^o^)／完成〜！

アレンジ：スクロールが一定の位置まで移動したら表示

とりあえず完成したのですが、少々アレンジを。右下固定で表示しているのですが、ずっと出たままになっているのでスクロールの位置がある程度下がったら表示するようにしてみます。

;(function($){
	$.fn.topMove = function(options){
		var defaults = {
			"speed"  : 500,
			"scroll" : 300
		};
		var
			settings = $.extend( {}, defaults, options ),
			event = "ontouchend" in window ? "touchend" : "click";

		return this.each(function(){
			var self = $(this);
			self.hide();

			self.on(event, function(e) {
				e.preventDefault();
				$('html, body').animate({scrollTop: 0}, settings.speed);
			});

			$(window).on('scroll', function () {
				if ($(this).scrollTop() > settings.scroll) {
					self.not(":animated").fadeIn();
				} else {
					self.not(":animated").fadeOut();
				}
			});
		});
	};
}(jQuery));
  • 5行目 – scrollがどこまで下がったら表示するかの初期値（300px）
  • 13行目 – 要素を最初は非表示にしておく
  • 20〜26行目 – windowのscrollイベントトリガーで、スクロール位置がパラメータの値を越えたらfadeInするように設定

アレンジ完成！＼(^o^)／
パラメータを増やしてフェードのスピードだったり、アニメーションの種類だったり、色々増やしてみても良いかも。

GitHub
※[jquery.topMove.js]フォルダに今回の記事のソースコードが入っています。

参考サイト

HTML5ROCKS: マルチタッチ ウェブ開発
https://www.html5rocks.com/ja/mobile/touch/